Syllabus

On this page

Icons (SVG & Icon Fonts)

Badar KhalilUpdated September 30, 2026 10 min read

Icons in Web Design: SVG and Icon Fonts

Icons communicate meaning faster than words. A magnifying glass means search, a heart means favourite, a cart means shopping. Choosing the right method to add SVG icons and icon fonts affects your page speed, accessibility, sharpness on high-DPI screens, and how easy the icons are to style with CSS. This lesson explains every method, compares them, and gives you live code for each.

Focus keyword: SVG icons and icon fonts. Related keywords: inline SVG, SVG sprite, currentColor, viewBox, Font Awesome, Material Symbols, Bootstrap Icons, Lucide icons, Heroicons, Phosphor icons, Iconify, CSS mask-image icons, accessible icons, aria-hidden.

1. Ways to Add Icons to a Web Page

Method	How it works	CSS colour control	Best for
Inline SVG	SVG code written directly in the HTML	Full (fill, stroke, currentColor)	A few important icons, animations
SVG sprite with use	Many symbols in one SVG, referenced by id	Good (via currentColor)	Large icon sets reused across pages
img tag with SVG file	Icon loaded as an image file	None (colour is fixed in the file)	Decorative, multicolour illustrations
CSS background or mask-image	Icon used as a CSS image	mask-image allows colour with background-color	Pseudo-element icons, list bullets
Icon font	Icons are glyphs in a web font	Uses the text color property	Quick prototypes, legacy projects

2. SVG Basics

SVG (Scalable Vector Graphics) is an XML-based format that describes shapes with math instead of pixels. That means it stays sharp at any size and on any screen density, and files are usually tiny.

viewBox='0 0 24 24' defines the internal coordinate system. The icon scales to whatever width and height you set in CSS.
fill colours the inside of shapes. stroke colours the outline. Outline icon sets such as Feather and Lucide use fill='none' and a stroke.
stroke-width, stroke-linecap and stroke-linejoin control the line style.
currentColor makes the icon inherit the text colour, so a single CSS color change restyles both text and icon.

Sizing Icons

Set icon size in em (for example 1.25em) so it scales with the surrounding font size. Use vertical-align: -0.125em or flexbox with align-items: center to line icons up with text.

3. SVG Sprites

A sprite is one hidden SVG containing multiple <symbol> elements. You display an icon with <svg><use href='#icon-id'/></svg>. This avoids repeating long path data and keeps HTML clean. Sprites can be inlined in the page or loaded from an external file, though external sprites have cross-origin restrictions.

4. Icon Fonts

An icon font maps icons to characters in a custom font. Popular examples are Font Awesome, Bootstrap Icons and Material Symbols. You add a stylesheet, then use an element with a class name such as <i class='fa-solid fa-house'></i>. Icons are sized with font-size and coloured with color.

Icon Font Drawbacks

The whole font file downloads even if you use only a few icons.
If the font fails to load, users may see empty boxes or the wrong character.
Icons render as text, so anti-aliasing can look slightly blurry and alignment is finicky.
Screen readers may announce the glyph. Add aria-hidden='true' for decorative icons.
They are single colour only.

SVG vs Icon Fonts: Which to Choose?

For most modern projects, SVG is the recommended choice: sharper rendering, better accessibility, multicolour support, animation, and tree-shaking (shipping only the icons you use). Icon fonts remain useful for fast prototyping, CMS themes, or when a library offers a convenient class-based system. Material Symbols is a modern variable icon font that lets you adjust fill, weight, grade and optical size with font-variation-settings.

5. Accessibility for Icons

Decorative icons (next to visible text): hide them with aria-hidden='true' and focusable='false' on the SVG.
Icon-only buttons: give the button an accessible name with aria-label or visually hidden text. Never leave an icon button unlabelled.
Meaningful standalone icons: use role='img' and a <title> linked with aria-labelledby.
Ensure a 3:1 contrast ratio for meaningful icons against their background.
Keep touch targets at least 24 by 24 CSS pixels (44 by 44 is ideal on mobile).
Do not communicate status using icon colour alone.

6. CSS mask-image Icons

With mask-image you can use an SVG as a shape and colour it with background-color: currentColor. This gives you the colour control of inline SVG while keeping the icon in CSS, which is perfect for pseudo-elements like ::before and ::after. Include the -webkit-mask prefix for wider browser support.

7. Performance Tips

Optimise SVG files with SVGO or SVGOMG to strip metadata and shorten paths.
Inline only critical icons, and use a sprite for the rest.
Use preconnect for external icon font CDNs, and pin library versions.
Prefer subsetted fonts or individual SVGs over loading a full icon font.
Use font-display: swap so text is not blocked while an icon font loads.

Lucide, Heroicons, Phosphor and Tabler Icons: modern, consistent SVG sets that work well with React, Vue and plain HTML.
Iconify: access many icon sets through a single API and on-demand loading.
Material Symbols: variable icon font with adjustable weight and fill.
currentColor everywhere for easy dark mode and theming.
CSS mask-image icons for lightweight, themeable UI details.
Animated SVG and micro-interactions with CSS transitions and keyframes, while respecting prefers-reduced-motion.

9. Common Mistakes

Forgetting the viewBox, which stops the icon from scaling properly.
Using hard-coded fill colours instead of currentColor.
Icon-only buttons with no accessible name.
Loading an entire icon font for two icons.
Not hiding decorative icons from screen readers.
Mixing icon sets with different stroke widths and styles.

Summary

Use inline SVG or sprites for crisp, accessible and stylable icons. Use icon fonts when you need a fast, class-based system. Always inherit colour with currentColor, size icons in em, hide decorative icons from assistive technology, and label icon-only controls. Try all the live examples below.

Try it Yourself HTML

<style>
  body { font-family: system-ui, sans-serif; font-size: 20px; padding: 20px; }
  .icon { width: 1.5em; height: 1.5em; vertical-align: -0.3em; }
  .blue { color: #2563eb; }
  .red { color: #dc2626; }
</style>
<p class='blue'>
  <svg class='icon' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true' focusable='false'>
    <path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/>
    <polyline points='9 22 9 12 15 12 15 22'/>
  </svg>
  Home (blue, inherits text colour)
</p>
<p class='red'>
  <svg class='icon' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true' focusable='false'>
    <path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/>
  </svg>
  Favourite (red, filled)
</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: system-ui, sans-serif; padding: 20px; color: #0f172a; }
  .icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .sm { width: 16px; height: 16px; }
  .md { width: 32px; height: 32px; }
  .lg { width: 64px; height: 64px; }
  .thin { stroke-width: 1; }
  .bold { stroke-width: 3; color: #7c3aed; }
</style>
<svg class='icon sm' viewBox='0 0 24 24' aria-hidden='true'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>
<svg class='icon md' viewBox='0 0 24 24' aria-hidden='true'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>
<svg class='icon lg thin' viewBox='0 0 24 24' aria-hidden='true'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>
<svg class='icon lg bold' viewBox='0 0 24 24' aria-hidden='true'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>

Output

Press Run to execute.

Try it Yourself HTML

<svg xmlns='http://www.w3.org/2000/svg' style='display:none'>
  <symbol id='i-home' viewBox='0 0 24 24'><path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><polyline points='9 22 9 12 15 12 15 22'/></symbol>
  <symbol id='i-search' viewBox='0 0 24 24'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></symbol>
  <symbol id='i-check' viewBox='0 0 24 24'><polyline points='20 6 9 17 4 12'/></symbol>
</svg>
<style>
  body { font-family: system-ui, sans-serif; font-size: 18px; padding: 20px; line-height: 2.2; }
  .icon { width: 1.4em; height: 1.4em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.3em; margin-right: 0.4em; }
  .ok { color: #16a34a; }
</style>
<div><svg class='icon' aria-hidden='true'><use href='#i-home'/></svg>Home</div>
<div><svg class='icon' aria-hidden='true'><use href='#i-search'/></svg>Search</div>
<div class='ok'><svg class='icon' aria-hidden='true'><use href='#i-check'/></svg>Saved successfully</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: system-ui, sans-serif; padding: 20px; }
  .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #e2e8f0;
    color: #0f172a;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .icon-btn:hover { background: #cbd5e1; }
  .icon-btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  .icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .with-text { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.1rem; border: 0; border-radius: 8px; background: #2563eb; color: #ffffff; font-size: 1rem; cursor: pointer; }
  .with-text svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
</style>
<button class='icon-btn' type='button' aria-label='Search'>
  <svg viewBox='0 0 24 24' aria-hidden='true' focusable='false'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>
</button>
<button class='with-text' type='button'>
  <svg viewBox='0 0 24 24' aria-hidden='true' focusable='false'><polyline points='20 6 9 17 4 12'/></svg>
  Save changes
</button>
<p>
  <svg role='img' aria-labelledby='warn-title' viewBox='0 0 24 24' width='28' height='28' fill='none' stroke='#b45309' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
    <title id='warn-title'>Warning</title>
    <path d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/>
    <line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/>
  </svg>
</p>

Output

Press Run to execute.

Try it Yourself HTML

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css'>
<style>
  body { font-family: system-ui, sans-serif; font-size: 22px; padding: 20px; line-height: 2.2; }
  .brand { color: #0f172a; }
  .love { color: #e11d48; }
  i { margin-right: 0.4em; }
</style>
<div><i class='fa-solid fa-house' aria-hidden='true'></i>Home</div>
<div class='love'><i class='fa-regular fa-heart' aria-hidden='true'></i>Favourite</div>
<div class='brand'><i class='fa-brands fa-github' aria-hidden='true'></i>GitHub</div>
<div><i class='fa-solid fa-spinner fa-spin' aria-hidden='true'></i>Loading...</div>
<div style='font-size: 40px; color: #2563eb;'><i class='fa-solid fa-rocket' aria-hidden='true'></i>Big icon via font-size</div>

Output

Press Run to execute.

Try it Yourself HTML

<link href='https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200' rel='stylesheet'>
<style>
  body { font-family: system-ui, sans-serif; padding: 20px; font-size: 18px; }
  .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 36px;
    vertical-align: middle;
    transition: font-variation-settings 0.25s ease, color 0.25s ease;
  }
  .material-symbols-outlined:hover {
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
    color: #e11d48;
  }
  .row { display: flex; gap: 1.5rem; align-items: center; }
</style>
<div class='row'>
  <span class='material-symbols-outlined' aria-hidden='true'>home</span>
  <span class='material-symbols-outlined' aria-hidden='true'>favorite</span>
  <span class='material-symbols-outlined' aria-hidden='true'>search</span>
  <span class='material-symbols-outlined' aria-hidden='true'>settings</span>
</div>
<p>Hover an icon to animate from outline to filled using variable font axes.</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: system-ui, sans-serif; padding: 20px; font-size: 20px; }
  .icon-mask {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: -0.3rem;
    margin-right: 0.4rem;
    background-color: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27><polyline points=%2720 6 9 17 4 12%27 fill=%27none%27 stroke=%27black%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27><polyline points=%2720 6 9 17 4 12%27 fill=%27none%27 stroke=%27black%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/></svg>') center / contain no-repeat;
  }
  .success { color: #16a34a; }
  .brand { color: #7c3aed; }
</style>
<p class='success'><span class='icon-mask' aria-hidden='true'></span>Green check from a CSS mask</p>
<p class='brand'><span class='icon-mask' aria-hidden='true'></span>Purple check, same icon, only color changed</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: system-ui, sans-serif; padding: 20px; }
  .like-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.1rem; border: 2px solid #e11d48; border-radius: 999px; background: transparent; color: #e11d48; font-size: 1rem; cursor: pointer; }
  .like-btn svg { width: 1.3em; height: 1.3em; fill: transparent; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: fill 0.2s ease, transform 0.2s ease; }
  .like-btn:hover svg { fill: currentColor; transform: scale(1.2); }
  .like-btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }
  .spinner { width: 32px; height: 32px; fill: none; stroke: #2563eb; stroke-width: 3; stroke-linecap: round; animation: spin 1s linear infinite; margin-left: 1rem; vertical-align: middle; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    .spinner { animation: none; }
    .like-btn svg { transition: none; }
  }
</style>
<button class='like-btn' type='button'>
  <svg viewBox='0 0 24 24' aria-hidden='true' focusable='false'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>
  Like
</button>
<svg class='spinner' viewBox='0 0 24 24' role='img' aria-label='Loading'><path d='M12 2a10 10 0 0 1 10 10'/></svg>

Output

Press Run to execute.

Exercise: Theme an Inline SVG with currentColorHTML

Replace the hard-coded stroke colour in the SVG with currentColor, set the icon size to 1.5em, and hide it from screen readers. Then make the link text and icon turn orange on hover by changing only the CSS color property of the link.

Try it Yourself HTML

<style>
  a { color: #2563eb; text-decoration: none; font-size: 20px; font-family: system-ui, sans-serif; }
  /* TODO: add a:hover and .icon styles */
</style>
<a href='#'>
  <svg class='icon' viewBox='0 0 24 24' fill='none' stroke='#2563eb' stroke-width='2'>
    <circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/>
  </svg>
  Search
</a>

Output

Press Run to execute.

Show expected output

The search icon and the word Search are blue by default and both turn orange on hover, using one color change on the link. The SVG has aria-hidden set to true.

This is a self-check — compare your result with the expected output above.

Exercise: Accessible Icon-Only ButtonHTML

Make the icon-only button accessible. Add an aria-label of Close, hide the SVG from assistive technology with aria-hidden and focusable set to false, give the button a visible :focus-visible outline, and make the button at least 44px by 44px.

Try it Yourself HTML

<style>
  button { border: 0; background: #e2e8f0; border-radius: 8px; cursor: pointer; }
  /* TODO: size and focus-visible styles */
</style>
<button type='button'>
  <svg viewBox='0 0 24 24' width='20' height='20' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round'>
    <line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/>
  </svg>
</button>

Output

Press Run to execute.

Show expected output

A 44px by 44px button with a close icon, an aria-label of Close, an aria-hidden SVG, and a clearly visible focus outline when reached by keyboard.

This is a self-check — compare your result with the expected output above.

Quiz: Icons (SVG & Icon Fonts) Quiz Pass 70%

Loading quiz…

Was this page helpful?

Icons in Web Design: SVG and Icon Fonts

1. Ways to Add Icons to a Web Page

2. SVG Basics

Sizing Icons

3. SVG Sprites

4. Icon Fonts

Icon Font Drawbacks

SVG vs Icon Fonts: Which to Choose?

5. Accessibility for Icons

6. CSS mask-image Icons

7. Performance Tips

8. Trending Icon Libraries and Techniques (2026)

9. Common Mistakes

Summary