Both our Web Fonts + CSS and SVG + JS frameworks include some basic controls for sizing icons in the context of your page's UI.
Advertisement
Remove ads with a Pro plan! Using this requires Font Awesome Pro
Pro
A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.
And of course Pro-level plans come with… All 7,864 Icons in Font Awesome Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands A Perpetual License to Use Pro Services and Tools to Make Easy Work of Using Icons Fresh Icons, Features, and Software Updates Plus Support From Real Humans
Get Font Awesome Pro for only $99/yr
Already have a Pro Plan?
Sign in
Relative Sizing Icons inherit the font-size
of their parent container which allow them to match any text you might use with them. With the following classes, we can increase or decrease the size of icons relative to that inherited font-size
.
Here are a few more examples where you can see the relative scale.
Remove ads with a Pro plan! Using this requires Font Awesome Pro
Pro
A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.
And of course Pro-level plans come with… All 7,864 Icons in Font Awesome Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands A Perpetual License to Use Pro Services and Tools to Make Easy Work of Using Icons Fresh Icons, Features, and Software Updates Plus Support From Real Humans
Get Font Awesome Pro for only $99/yr
Already have a Pro Plan?
Sign in
Did You Know?
You can also directly style an icon's size by setting a font-size
in your project's CSS that targets an icon or directly in the style
attribute of the HTML element referencing an icon.