Skip to content

Web Fonts vs SVG

Web Fonts have been used since the earliest days of Font Awesome and are still a solid workhorse. SVG is the new kid on the block with lots of extra tricks and capabilities. Which one is right for you?

Web Fonts + CSS

Icon web fonts are just that - fonts that are made up of icons. We pair the icon font with CSS to get all the magic of Font Awesome icons to show up seamlessly in your apps, sites, and other web projects.

Superpowers:

  • Easiest to set up and use
  • Reliable and established technology
  • Can be used in pseudo-elements in CSS to display the icon without touching HTML
  • Each icon can be referenced by its unique unicode value
  • Batched into subsets to improve performance

Weaknesses:

  • Can’t do some of the advanced styling tricks
  • Can’t do auto-accessibility (except in a kit)

SVG + JS

SVGs are vector-based images that are rendered using the browser’s engine. We pair it with javascript to invoke the magic of Font Awesome icons into your apps, sites, and other web projects.

Superpowers:

  • Great for javascript-based apps when rendered through our JS packages
  • Capable of some fancy tricks like masking, layering, and power transforms
  • Uses the power of vectors to draw crisp icons at any size
  • Easier to create custom subsets with just the icons you need

Weaknesses:

  • Doesn’t come with any native rendering unless paired with our JS
  • Can bog a browser down when many icons are used on a single page (but you can fix this with SVG symbols if you’re using repeating icons)

Side-by-side comparison

Feature/OptionWeb Fonts & CSSSVG & JS
How Icons RenderAs CSS pseudo-elements.As SVG elements in your page’s HTML.
Best ForPeople who are used to Font Awesome’s older versions. Projects where HTML markup can’t be modified and icons must be added using CSS pseudo-elements (:before)People who prefer to use SVGs to display icons. People who want to use advanced features like Power Transforms.
Upgrading Difficulty (from v4)Similar file structure and framework as Version 4. Shim available to map v4 icon names to v5 equivalents.Different files and references needed. Some rendering proofing is needed. Shim available.
RequirementsCSS and a browser that supports web fonts (leveraging @font-face).CSS, JavaScript, and a browser that supports rendering SVGs.
Icon Sizing Supported Supported
Icon Rotating Supported Supported
Listed, Bordered, and Pulled Styling Supported Supported
Icon Animations Supported Supported
Stacking Icons Supported Supported
Auto-Accessibility Not supported (except when using kits) Supported
Power Transforms Not supported Supported
Masking Not supported Supported
Layering Text and Counters Not supported Supported