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 some 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/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