Icons
Add visual meaning to buttons, navigation, actions, and interfaces with clear, accessible icons.
>_ What Are Icons?
Icons are small visual symbols used to represent actions, objects, ideas, or information. They can make an interface easier to scan and help users recognize common actions quickly.
You see icons constantly while using websites and apps: a house for Home, a magnifying glass for Search, a gear for Settings, or a trash can for Delete.
Navigation
Icons can help people recognize common destinations such as Home or Settings.
Actions
Save, edit, delete, upload, and download actions are often paired with icons.
Status
Icons can communicate success, warnings, errors, and other interface states.
>_ Simple Text & Unicode Icons
Some symbols can be placed directly into HTML as normal characters.
✓ Save
</button>
>_ Icon Libraries
Larger projects often use an icon library instead of relying only on text symbols. An icon library provides a collection of icons designed to share the same visual style.
Consistent
Icons from the same library usually share a consistent design language.
Reusable
The same icons can be reused throughout navigation, buttons, forms, and components.
Scalable
Many modern icon systems use SVG graphics that remain sharp at different sizes.
Customizable
Size, color, spacing, and other visual properties can often be controlled with CSS.
>_ Icons Work Well with Text
An icon does not always need to stand alone. Pairing an icon with a text label can make the meaning much clearer.
<span aria-hidden=“true”>⚙</span>
Settings
</button>
>_ Icons & Accessibility
If an icon is only decorative and the button
already contains a clear text label, you can
hide the icon from assistive technology with
aria-hidden="true".
For example, the word Settings already tells the user what the button does. The gear is simply extra visual information.
⚙
</span>
>_ What About Icon-Only Buttons?
If a button contains only an icon, its purpose may not be clear to everyone. In that situation, give the button an accessible name.
⚙
</button>
Don’t assume every visitor will interpret an unfamiliar icon the same way. When possible, combine icons with clear text labels.
>_ Styling an Icon Button
Icons can be combined with everything you’ve already learned about classes, spacing, colors, hover states, and the Box Model.
padding: 10px 16px;
background-color: #071a35;
color: white;
border-radius: 6px;
}
Build an Action Panel
Turn the plain buttons in the Sandbox into clear, styled actions that combine icons with meaningful text.
-
✓
Add
class="action-button"to every button. -
✓
Add a Home icon and label using
⌂ Home. -
✓
Add
✓ Save,✕ Delete, and⚙ Settings. -
✓
Wrap decorative icons in a
spanwitharia-hidden="true". -
✓
Add
dangerto the Delete button so it has a different visual style.
Icons Challenge
What You’ve Learned
aria-hidden="true".
Nice work!
Finished this lesson? Mark it complete to track your progress.