What's Changed in v7

We've packed a lot into v7, but here are some key changes that might be different than how you've used Font Awesome.

V7 Changes At a Glance

New Pro+ Icon Packs

v7 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

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

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

Icons are now decorative by default, meaning they are always hidden from screen readers. If you were using a title attribute to convey the meaning of an icon to screenreaders, you can update to use aria-label which has better support. Whether you're using icons in interactive elements (like buttons) or using icons on their own to convey meaning in content, we've got instructions for you to upgrade your project to the latest and greatest.

Note: We also removed the sr-only class from our styles. If you're still using it, be sure to add your own implementation, which might look something like this:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

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 v6-based Sass/SCSS project, you'll need to update your compile syntax and variable/mixin references in order to use v7's Sass/SCSS.

Official jQuery Support Dropped

We've made the decision to drop support for jQuery in v7. If you were previously using it in your project, you can continue to do so alongside v6.

Less CSS Support Dropped

We've made the decision to drop Less CSS support in v7. If you're using Less in your project, you can migrate to Sass, use Font Awesome's CSS, or continue to use v6's Less.

Official Python Django Plugin Support Dropped

We've made the decision to drop support for our official Python Django Plugin in v7. 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 Rails with Turbolinks Support Dropped

We've made the decision to drop support for Rails with Turbolinks in v7. If you were previously using it in your project, you can continue to do so alongside v6.

Official Require.js Support Dropped

We've made the decision to drop support for Require.js in v7. If you were previously using it in your project, you can continue to do so alongside v6.

Official Ruby on Rails Gem Support Dropped

We've made the decision to drop support for our official Ruby on Rails Gem in v7. If you were previously using it in your project, you can continue to do so alongside v6. If you want to update to v7, we recommend using a Web Fonts-based Kit. If you'd prefer, you can even download and host the Kit yourself.

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.

React

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 v7.

SVG Format Overhaul

Our individual SVG icon files have changed in v7. 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

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

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

We've optimized the performance of v7 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

We've tried our hardest to make v7 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 v7 automagically. We've bundled the following by default…

Icons Renamed In v7

We've cleaned up a number of visually similar or redundant icons and remapped them as aliases.