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
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 26,233 icons in Font Awesome
5 Classic styles of every icon
3 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
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
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
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.