CSS Icons
Icons sharpen any interface. CSS itself doesn't ship icons — but you have several solid ways to add them.
Four ways to put an icon on the page
| Approach | How | Trade-off |
|---|---|---|
| Icon font | Font Awesome, Material Symbols. Use a class on a <i> or <span>. | One color, easy to size. Adds a font file. |
| Inline SVG | Paste <svg> right into the HTML. | Sharpest result. Stylable per-path. Bigger HTML. |
| External SVG | <img src="icon.svg"> | Cacheable. Hard to recolour without a CSS filter. |
| Emoji | Just type them. | Free, instant. Look depends on the OS. |
Inline SVG example
HTML + CSS
<button class="btn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2L15 9l7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/>
</svg>
Star
</button>
.btn { color: #04AA6D; } /* the SVG inherits this via fill="currentColor" */
Tip:
fill="currentColor" on the SVG path lets you recolour the icon with plain color on the button — no separate icon styles.Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Icons</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Let the inline SVG icon take its colour from the surrounding text.
<svg fill="
" width="16" height="16">…</svg>
A CSS keyword that means "the element's color value".
Discussion
Loading…