What's Changed in Version 7
We’ve packed a lot into Version 7, but here are some key changes that might be different than how you’ve used Font Awesome.
V7 Changes At a Glance
Section titled “V7 Changes At a Glance”New Pro+ Icon Packs
Section titled “New Pro+ Icon Packs”Version 7 introduces Pro+ icon packs: curated sets of icons with a unique visual style, perfect for specific kinds of projects or design systems.
Each pack includes around 200 of the most commonly used icons in app and web design, and is only available with a Pro+ subscription.
Currently available packs include:
- Chisel
- Etch
- Jelly
- Notdog
- Slab
- Thumbprint
- Whiteboard
- And more are on the way!
Fixed Width Icons by Default
Section titled “Fixed Width Icons by Default”By default, all Font Awesome icons now display at a fixed width which fills the entire Icon Canvas. If you’re an older version veteran, this is the equivalent of applying the now deprecated fa-fw class. We think this change improves the default rendering of icons in many cases, but you can always set things back to icons rendering with an Automatic Width.
CSS Improvements
Section titled “CSS Improvements”We’ve improved the naming of CSS custom properties as well as more consistently used them throughout our CSS. We’ve updated our Pulled Icons and Icons in a List features to use CSS Logical Properties.
Simpler Accessibility
Section titled “Simpler Accessibility”Icons are now decorative by default, meaning they are always hidden from screen readers. If you do want to make them accessible to assistive technology, we’ve got you covered with step-by-step instructions.
Note: We also removed the
sr-onlyclass from our styles. If you’re still using it, be sure to add your own implementation.
Sass/SCSS Improvements
Section titled “Sass/SCSS Improvements”We’ve made a full migration to Dart Sass and modern SCSS syntax. That means that the community-deprecated node-sass, libsass, and @import are no longer supported.
With the Sass/SCSS improvements noted above, we’ve made major changes to how things are compiled and used. If you’re using a Version 6-based Sass/SCSS project, you’ll need to update your compile syntax and variable/mixin references in order to use Version 7’s Sass/SCSS.
Less CSS Support Dropped
Section titled “Less CSS Support Dropped”We’ve made the decision to drop Less CSS support in Version 7. If you’re using Less in your project, you can migrate to Sass, use Font Awesome’s CSS, or continue to use Version 6’s Less.
Official Python Django Plugin Support Dropped
Section titled “Official Python Django Plugin Support Dropped”We’ve made the decision to drop support for our official Python Django Plugin in Version 7. If you were previously using it in your project, you can continue to do so alongside Font Awesome 6. If you want to update to Font Awesome 7, we recommend switching to a Kit instead.
Official Ruby on Rails Gem Support Dropped
Section titled “Official Ruby on Rails Gem Support Dropped”We’ve made the decision to drop support for our official Ruby on Rails Gem in Version 7. If you were previously using it in your project, you can continue to do so alongside Font Awesome 6. If you want to update to Font Awesome 7, we recommend using a Web Fonts-based Kit. If you’d prefer, you can even download and host the Kit yourself.
Vue.js
Section titled “Vue.js”Our official vue-fontawesome JavaScript component now supports Vue.js 3 and later versions only. If you’re using an earlier version of Vue.js, we can’t guarantee that all aspects of the component are compatible or will function as expected.
Our official react-fontawesome JavaScript component has dropped support for dynamic importing. If you’re using that way of adding icons, you’ll need to change your syntax in order to use the component with Version 7.
SVG Format Overhaul
Section titled “SVG Format Overhaul”Our individual SVG icon files have changed in Version 7. They no longer include a global stylesheet, omit class attributes on <path> elements, and default to fill=currentColor. For Duotone icons, color and opacity are now controlled via CSS custom properties.
SVG Download ViewBox Updates
Section titled “SVG Download ViewBox Updates”Downloaded SVGs now default to a square viewBox for consistent sizing. If needed, you can also choose to download a trimmed version.
Webfont Format Modernization
Section titled “Webfont Format Modernization”We now only ship the modern .woff2 format for webfonts. If your project uses .ttf or .woff, you’ll need to update your setup to use .woff2.
Performance Optimizations
Section titled “Performance Optimizations”We’ve optimized the performance of Version 7 across the board:
- Smaller webfonts thanks to Brotli compression and modern formats like CFF
- Improved pseudo-element rendering performance when using SVG + JS
- Reduced CSS file sizes via variable usage and compression strategies
Backward Compatibility
Section titled “Backward Compatibility”We’ve tried our hardest to make Version 7 backward compatible with Font Awesome 6 and Font Awesome 5 too! Whether you’re using Kits, components, hosting things yourself, using Web Fonts, or SVG + JS, we’ve done a lot to translate icons in existing projects to Version 7 automagically. We’ve bundled the following by default…
| What We Did | How it Works |
|---|---|
| Mapped renamed CSS custom properties | Any existing CSS custom properties that were renamed have been mapped to their new names |
| Mapped renamed Sass (SCSS) variables | Any existing Preprocessor variables that were renamed have been mapped to their new names |
| Removed Auto-Accessibility | Icons are now hidden from assistive technology by default, and semantic icons can manually be made accessible |
Icons Renamed In Version 7
Section titled “Icons Renamed In Version 7”We’ve cleaned up a number of visually similar or redundant icons and remapped them as aliases.