CSS — Icons

Icons: small, everywhere, important

Buttons, menus, status indicators, empty states. Three practical routes:

1. Inline SVG (recommended)

Scalable, styleable, zero extra requests:

<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
     stroke="currentColor" stroke-width="2">
    <path d="M3 12h18M3 6h18M3 18h18"/>
</svg>

(A hamburger menu icon — three horizontal lines.)

currentColor is the trick that makes SVGs CSS-friendly — the icon inherits the text color:

.btn { color: white; }
.btn:hover { color: gold; }    /* the SVG inside recolors automatically */

Copy quality free SVGs from libraries: Lucide, Heroicons, Phosphor, Bootstrap Icons.

2. Icon fonts (legacy but common)

Libraries like Font Awesome ship an entire icon alphabet as a font:

<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<i class="fa-solid fa-house"></i>
<i class="fa-brands fa-github"></i>

What the browser displays

(A house glyph and the GitHub mark rendered like colored text.)

They behave exactly like text — font-size, color, vertical-align all apply:

.fa-house { color: #0d9488; font-size: 24px; }

Downsides vs SVG: one extra HTTP request for the font file, single-color glyphs, screen readers may announce letter names if markup is wrong.

Accessibility either way: decorative icons get hidden (aria-hidden="true"); meaningful ones get a label:

<button>
    <i class="fa-solid fa-trash" aria-hidden="true"></i>
    <span class="sr-only">Delete item</span>
</button>

3. Emoji — fun, not professional

<span>🚀 Launch</span>

Zero setup and colorful — but they render differently on every OS, can't be recolored, and read as casual. Fine for side projects and docs personality; avoid in serious UI chrome.

Sizing and alignment patterns

.icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;      /* sit nicely beside text */
}

/* Icon + label rows */
.menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

<a class="menu-item" href="/settings">
    <svg …></svg>
    Settings
</a>

Flexbox + gap solves icon-text alignment permanently — no baseline fiddling.

Buttons with icons

.button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

<button class="button">
    <svg><!-- download glyph --></svg>
    Download report
</button>

(Icon and label centered together regardless of length.)

Mini Practice

1. Paste three Lucide SVGs into a nav; recolor via parent color
2. Add Font Awesome once; render five brand icons at varying sizes
3. Build two menu rows with flex + gap alignment
4. Make an icon-only button properly accessible with .sr-only
5. Compare the same icon as emoji vs SVG at 16px and 64px — note where emoji breaks down

Next: links → (CSS link states)