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?

Advertisement

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)
Advertisement

Side-by-side comparison

Feature/Option Web Fonts & CSS SVG & JS
How Icons Render As CSS pseudo-elements. As SVG elements in your page's HTML.
Best For People 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.
Requirements CSS 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

You're viewing the Version 6 Beta

It's all the awesome of 5, but now more six-y! Version 6 brings over 13,000 icons across 5 styles – including the new Thin style! – and includes more and faster services.

Get the Deets on Version 6

Head Back to Our Current Version 5 Release

Need a Hand?

If you’re stuck or have a question, check our Troubleshooting docs, all of the Font Awesome threads on Stack Overflow, or contact our community on GitHub.

Or get Real Human Support™ with a Pro Subscription!