How to Identify Icon Fonts vs SVG Icons on Any Website

Website icons usually come from one of two places: an icon font, where each icon is a character in a special font, or SVG, where each icon is a small vector drawing. They look the same on screen, but they behave differently, and it's easy to tell them apart.

Icon fonts

Libraries such as Font Awesome and Google's Material Symbols package icons as fonts. In the page code you'll typically see:

• An empty element with a class, such as <i class="fa fa-user">. The icon is added with a CSS ::before rule.
• Or a word inside an element, such as <span class="material-symbols-outlined">home</span>, which the font turns into the icon.

SVG icons

• An <svg> element with <path> shapes inside, written into the page.
• An <img> pointing to a file ending in .svg.
• An <svg> with a <use> element that refers to an icon in a shared sprite file.

How to check in DevTools

1. Right-click the icon and choose Inspect.
2. If the highlighted element is an svg or an img with an SVG file, it's SVG.
3. If it's an i or span, look in the Styles pane for a ::before rule with a content value, and check the Computed tab's font family. A family like "Font Awesome" or "Material Symbols" confirms an icon font.
4. In the Network tab, filter by Font and reload; icon fonts appear as their own font files.

A quicker check

Font Detector shows the font family of whatever you click. Click an icon: if it reports an icon font's name, that's your answer. If it shows the page's normal text font, the icon is probably an SVG.

Why the difference matters

• Accessibility: screen readers can read icon font characters as odd symbols or words unless the icons are hidden from them. SVGs can carry proper titles and labels.
• Reliability: if an icon font fails to load or a user overrides fonts, icons turn into boxes or words. SVGs don't depend on fonts.
• Sharpness and color: SVGs render crisply and can have several colors; icon fonts are one color.
• Ease: icon fonts are easy to size and color with CSS, and one file covers hundreds of icons.

Many modern sites have moved to SVG for accessibility and reliability, though icon fonts remain common and work well when used carefully.

Learn more about a site's design

See reverse-engineering a design system and design tokens.