CSS Icons

What Are CSS Icons?

CSS icons are icons that are added to HTML and styled using CSS. They can come from icon font libraries, SVG files, inline SVG markup, CSS pseudo-elements, emoji, or framework icon packages such as Bootstrap Icons and Font Awesome.

<button class="icon-button" type="button">
  <span class="icon" aria-hidden="true">★</span>
  <span>Favorite</span>
</button>

.icon-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.icon {
  color: #0d6efd;
  font-size: 1.25rem;
}

Icons should support the content, not replace important text without accessible labels.

Why CSS Icons Are Important

• Icons help users scan actions and navigation faster.
• They make buttons, alerts, forms, and menus easier to understand.
• They improve visual hierarchy and user interface design.
• They support brand consistency across components.
• They can reduce visual clutter when used with proper labels.
• Accessible icons improve usability for more users.
• Optimized icons improve page speed and Core Web Vitals.

CSS Icons Cheatsheet

The following table explains common ways to add and style icons in CSS.

Icon Fonts

Icon fonts use font files to display icons. Popular examples include Bootstrap Icons, Font Awesome, Material Icons, and custom icon fonts.

<i class="bi bi-house-door" aria-hidden="true"></i>
<span>Home</span>

.nav-icon {
  font-size: 1.25rem;
  color: #0d6efd;
}

Icon fonts are easy to use, but SVG icons often provide better control, accessibility, and rendering quality.

Bootstrap Icons Example

Bootstrap Icons are commonly used with Bootstrap-based websites.

<button class="btn btn-primary" type="button">
  <i class="bi bi-download" aria-hidden="true"></i>
  Download
</button>

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

If an icon is decorative and the button already has visible text, use aria-hidden="true" on the icon.

Font Awesome Example

Font Awesome is another popular icon library for websites and applications.

<a href="/contact/" class="icon-link">
  <i class="fa-solid fa-envelope" aria-hidden="true"></i>
  Contact Us
</a>

.icon-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.icon-link:hover,
.icon-link:focus-visible {
  text-decoration: underline;
}

SVG Icons

SVG icons are scalable vector icons. They stay sharp on all screen sizes and are flexible for styling with CSS.

<svg
  class="icon"
  viewBox="0 0 24 24"
  aria-hidden="true"
  focusable="false"
>
  <path
    fill="currentColor"
    d="M12 2L15 9H22L16.5 13.5L18.5 21L12 16.8L5.5 21L7.5 13.5L2 9H9L12 2Z"
  />
</svg>

.icon {
  width: 1.25rem;
  height: 1.25rem;
  color: #0d6efd;
  flex-shrink: 0;
}

The currentColor value allows SVG icons to inherit the text color.

Inline SVG vs Icon Fonts

Inline SVG and icon fonts both work, but they have different strengths.

How to Style Icons with CSS

Icons can be styled with size, color, spacing, alignment, hover states, and focus states.

.icon-text {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.icon-text .icon {
  width: 1.25rem;
  height: 1.25rem;
  color: #0d6efd;
  flex-shrink: 0;
}

.icon-text:hover .icon {
  color: #084298;
}

Use gap instead of margin when aligning icons and text inside Flexbox layouts.

Icon-Only Buttons

Icon-only buttons must have an accessible name because there is no visible text label.

<button class="icon-only-button" type="button" aria-label="Search">
  <svg class="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
    <path fill="currentColor" d="..." />
  </svg>
</button>

.icon-only-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  background: #ffffff;
  color: #212529;
}

.icon-only-button:focus-visible {
  outline: 3px solid #111111;
  outline-offset: 3px;
}

Use aria-label to describe the button action, such as Search, Close, Menu, Delete, Edit, or Download.

Decorative vs Meaningful Icons

Icons can be decorative or meaningful. Accessibility depends on the icon’s purpose.

CSS Background Icons

CSS background icons are useful for decorative icons, list markers, and visual patterns. Do not use background images for important icons that need accessible text.

.external-link {
  padding-right: 1.25rem;
  background-image: url("/icons/external-link.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 1rem 1rem;
}

Background icons are not announced by screen readers, so they should not carry important meaning alone.

CSS Pseudo-element Icons

Pseudo-elements can add small decorative icons before or after content.

.resource-link::after {
  content: "↗";
  margin-left: 0.35rem;
  font-size: 0.875em;
}

.check-list li::before {
  content: "✓";
  color: #198754;
  margin-right: 0.5rem;
}

Use pseudo-element icons for decoration only. Important information should exist as real text.

Icon Color with currentColor

The currentColor keyword makes icons inherit the text color of their parent.

.status-success {
  color: #198754;
}

.status-success svg {
  fill: currentColor;
}

.status-danger {
  color: #842029;
}

.status-danger svg {
  fill: currentColor;
}

This makes icon colors easier to maintain and keeps icons aligned with surrounding text.

CSS Icons and Accessibility

Accessible icons should be clear for visual users and properly labeled for assistive technology.

• Use visible text labels with icons when possible.
• Use aria-hidden="true" for decorative icons.
• Use aria-label for icon-only buttons.
• Do not use icons as the only way to show important meaning.
• Use enough color contrast for icons.
• Keep focus states visible on icon buttons and icon links.
• Make icon buttons large enough for touch users.

.icon-button {
  min-width: 44px;
  min-height: 44px;
}

.icon-button:focus-visible {
  outline: 3px solid #111111;
  outline-offset: 3px;
}

CSS Icons, SEO, and Performance

Icons do not directly improve search rankings, but they affect page speed, accessibility, navigation clarity, user experience, and conversion paths.

• Use optimized SVG icons when possible.
• Do not load huge icon libraries for only a few icons.
• Use text labels for important navigation and actions.
• Avoid hiding meaningful text behind icon-only interfaces.
• Use accessible names for icon-only buttons.
• Prefer inline SVG or individual SVG files for performance-critical pages.

Popular Icon Libraries

Many websites use ready-made icon libraries for faster development.

Common CSS Icon Mistakes

• Using icon-only buttons without accessible labels.
• Loading a large icon library for only one or two icons.
• Using icons without visible text in important navigation.
• Using low contrast icon colors.
• Forgetting focus states on icon buttons.
• Using background icons for meaningful information.
• Making icon buttons too small for touch users.
• Using inconsistent icon sizes and stroke styles.
• Not hiding decorative icons from screen readers.

CSS Icon Best Practices

• Use SVG icons for modern, scalable, and sharp UI icons.
• Use currentColor so icons inherit text color.
• Use visible labels for important actions whenever possible.
• Add aria-label to icon-only buttons.
• Use aria-hidden="true" for decorative icons.
• Keep icon sizes consistent across components.
• Use inline-flex and gap to align icons with text.
• Optimize SVGs before publishing.
• Avoid loading unused icon library files.
• Test icons with keyboard navigation and screen readers.

Key Takeaways

• CSS icons improve visual scanning, navigation, and UI clarity.
• Icons can be added using SVG, icon fonts, images, backgrounds, or pseudo-elements.
• SVG icons are usually best for modern websites.
• Use currentColor to keep icon colors easy to maintain.
• Decorative icons should use aria-hidden="true".
• Icon-only buttons need accessible labels such as aria-label.
• Optimized icons improve accessibility, performance, and user experience.