Font Awesome
Start Search Icons Icons Docs Plans Support Blog
Sign In

Font Awesome Docs Navigation

Docs Home

Web

Set Up

  • Use a Kit
  • Get Started
  • Using A Package Manager
  • Host Yourself:
    • Host Yourself - Web Fonts
    • Host Yourself - SVG + JS
  • Upgrade:
    • Upgrade to Version 6
    • What's Changed
    • Sass (SCSS) and Less
    • JavaScript Components
    • Package Managers
    • Python/Django Package
    • WordPress
    • SVGs + SVG Sprites
    • CSS Pseudo-elements
    • Upgrade from Version 4

Add Icons

  • How To Add Icons
  • CSS Pseudo-elements
  • SVG Sprites
  • SVG Symbols
  • SVG Unicodes
  • Bare SVGs on the Web
  • Upload Your Own Icons:
    • Upload Your Own Icons
    • Icon Design Guidelines
    • Prep Icons for Upload
    • Troubleshoot Uploads
  • Icon Wizard

Style

  • Styling with Font Awesome
  • Styling Basics
  • Sizing Icons
  • Fixed Width Icons
  • Icons in a List
  • Rotate Icons
  • Animating Icons
  • Bordered & Pulled Icons
  • Stacking Icons
  • Power Transforms
  • Masking
  • Layering Text & Counters
  • Duotone Icons
  • Customizing Icons
  • Style Cheatsheet

Dig Deeper

  • Web Fonts vs SVG
  • Families + Styles
  • Browser Support
  • Accessibility
  • Security
  • Fast Style Switching
  • Conflict Detection
  • Performance
  • Pro Subsetter
  • Server-side Rendering
  • SVG Async Loading
  • SVG Core
  • Continuous Integration

Use With...

  • Vue:
    • Set Up with Vue
    • Add Icons with Vue
    • Adding Icon Styling with Vue
    • Dig Deeper
    • Use Vue with...
    • Troubleshoot
  • React:
    • Set Up with React
    • Add Icons with React
    • Adding Icon Styling with React
    • Dig Deeper
    • Use React with...
    • Troubleshoot
  • Squarespace
  • WordPress:
    • Set Up with WordPress
    • Add Icons with WordPress
    • Style Icons with WordPress
    • Troubleshoot
    • Install Manually
  • Angular
  • Ember
  • Python/Django
  • Sass (SCSS)
  • Less
  • jQuery
  • Ruby on Rails
  • Rails with Turbolinks
  • React Native
  • Require.js

Troubleshoot

  • Help and Troubleshooting

Desktop

Set Up

  • Use a Kit
  • Get Started
  • Using A Package Manager
  • Host Yourself:
    • Host Yourself - Web Fonts
    • Host Yourself - SVG + JS
  • Upgrade:
    • Upgrade to Version 6
    • What's Changed
    • Sass (SCSS) and Less
    • JavaScript Components
    • Package Managers
    • Python/Django Package
    • WordPress
    • SVGs + SVG Sprites
    • CSS Pseudo-elements
    • Upgrade from Version 4

Add Icons

  • How To Add Icons
  • CSS Pseudo-elements
  • SVG Sprites
  • SVG Symbols
  • SVG Unicodes
  • Bare SVGs on the Web
  • Upload Your Own Icons:
    • Upload Your Own Icons
    • Icon Design Guidelines
    • Prep Icons for Upload
    • Troubleshoot Uploads
  • Icon Wizard

Style

  • Styling with Font Awesome
  • Styling Basics
  • Sizing Icons
  • Fixed Width Icons
  • Icons in a List
  • Rotate Icons
  • Animating Icons
  • Bordered & Pulled Icons
  • Stacking Icons
  • Power Transforms
  • Masking
  • Layering Text & Counters
  • Duotone Icons
  • Customizing Icons
  • Style Cheatsheet

Dig Deeper

  • Web Fonts vs SVG
  • Families + Styles
  • Browser Support
  • Accessibility
  • Security
  • Fast Style Switching
  • Conflict Detection
  • Performance
  • Pro Subsetter
  • Server-side Rendering
  • SVG Async Loading
  • SVG Core
  • Continuous Integration

Use With...

  • Vue:
    • Set Up with Vue
    • Add Icons with Vue
    • Adding Icon Styling with Vue
    • Dig Deeper
    • Use Vue with...
    • Troubleshoot
  • React:
    • Set Up with React
    • Add Icons with React
    • Adding Icon Styling with React
    • Dig Deeper
    • Use React with...
    • Troubleshoot
  • Squarespace
  • WordPress:
    • Set Up with WordPress
    • Add Icons with WordPress
    • Style Icons with WordPress
    • Troubleshoot
    • Install Manually
  • Angular
  • Ember
  • Python/Django
  • Sass (SCSS)
  • Less
  • jQuery
  • Ruby on Rails
  • Rails with Turbolinks
  • React Native
  • Require.js

Troubleshoot

  • Help and Troubleshooting

APIs

Set Up

  • Use a Kit
  • Get Started
  • Using A Package Manager
  • Host Yourself:
    • Host Yourself - Web Fonts
    • Host Yourself - SVG + JS
  • Upgrade:
    • Upgrade to Version 6
    • What's Changed
    • Sass (SCSS) and Less
    • JavaScript Components
    • Package Managers
    • Python/Django Package
    • WordPress
    • SVGs + SVG Sprites
    • CSS Pseudo-elements
    • Upgrade from Version 4

Add Icons

  • How To Add Icons
  • CSS Pseudo-elements
  • SVG Sprites
  • SVG Symbols
  • SVG Unicodes
  • Bare SVGs on the Web
  • Upload Your Own Icons:
    • Upload Your Own Icons
    • Icon Design Guidelines
    • Prep Icons for Upload
    • Troubleshoot Uploads
  • Icon Wizard

Style

  • Styling with Font Awesome
  • Styling Basics
  • Sizing Icons
  • Fixed Width Icons
  • Icons in a List
  • Rotate Icons
  • Animating Icons
  • Bordered & Pulled Icons
  • Stacking Icons
  • Power Transforms
  • Masking
  • Layering Text & Counters
  • Duotone Icons
  • Customizing Icons
  • Style Cheatsheet

Dig Deeper

  • Web Fonts vs SVG
  • Families + Styles
  • Browser Support
  • Accessibility
  • Security
  • Fast Style Switching
  • Conflict Detection
  • Performance
  • Pro Subsetter
  • Server-side Rendering
  • SVG Async Loading
  • SVG Core
  • Continuous Integration

Use With...

  • Vue:
    • Set Up with Vue
    • Add Icons with Vue
    • Adding Icon Styling with Vue
    • Dig Deeper
    • Use Vue with...
    • Troubleshoot
  • React:
    • Set Up with React
    • Add Icons with React
    • Adding Icon Styling with React
    • Dig Deeper
    • Use React with...
    • Troubleshoot
  • Squarespace
  • WordPress:
    • Set Up with WordPress
    • Add Icons with WordPress
    • Style Icons with WordPress
    • Troubleshoot
    • Install Manually
  • Angular
  • Ember
  • Python/Django
  • Sass (SCSS)
  • Less
  • jQuery
  • Ruby on Rails
  • Rails with Turbolinks
  • React Native
  • Require.js

Troubleshoot

  • Help and Troubleshooting

Changelog

Set Up

  • Use a Kit
  • Get Started
  • Using A Package Manager
  • Host Yourself:
    • Host Yourself - Web Fonts
    • Host Yourself - SVG + JS
  • Upgrade:
    • Upgrade to Version 6
    • What's Changed
    • Sass (SCSS) and Less
    • JavaScript Components
    • Package Managers
    • Python/Django Package
    • WordPress
    • SVGs + SVG Sprites
    • CSS Pseudo-elements
    • Upgrade from Version 4

Add Icons

  • How To Add Icons
  • CSS Pseudo-elements
  • SVG Sprites
  • SVG Symbols
  • SVG Unicodes
  • Bare SVGs on the Web
  • Upload Your Own Icons:
    • Upload Your Own Icons
    • Icon Design Guidelines
    • Prep Icons for Upload
    • Troubleshoot Uploads
  • Icon Wizard

Style

  • Styling with Font Awesome
  • Styling Basics
  • Sizing Icons
  • Fixed Width Icons
  • Icons in a List
  • Rotate Icons
  • Animating Icons
  • Bordered & Pulled Icons
  • Stacking Icons
  • Power Transforms
  • Masking
  • Layering Text & Counters
  • Duotone Icons
  • Customizing Icons
  • Style Cheatsheet

Dig Deeper

  • Web Fonts vs SVG
  • Families + Styles
  • Browser Support
  • Accessibility
  • Security
  • Fast Style Switching
  • Conflict Detection
  • Performance
  • Pro Subsetter
  • Server-side Rendering
  • SVG Async Loading
  • SVG Core
  • Continuous Integration

Use With...

  • Vue:
    • Set Up with Vue
    • Add Icons with Vue
    • Adding Icon Styling with Vue
    • Dig Deeper
    • Use Vue with...
    • Troubleshoot
  • React:
    • Set Up with React
    • Add Icons with React
    • Adding Icon Styling with React
    • Dig Deeper
    • Use React with...
    • Troubleshoot
  • Squarespace
  • WordPress:
    • Set Up with WordPress
    • Add Icons with WordPress
    • Style Icons with WordPress
    • Troubleshoot
    • Install Manually
  • Angular
  • Ember
  • Python/Django
  • Sass (SCSS)
  • Less
  • jQuery
  • Ruby on Rails
  • Rails with Turbolinks
  • React Native
  • Require.js

Troubleshoot

  • Help and Troubleshooting

Help

Web

Styling with Font Awesome

Font Awesome has a ton of great styling tools that work hand-in-hand with our icons to really make your project look its best.

Many of the styles can be combined to get even more effects, though some are only available when using our SVG+JS method.

Basics

Font Awesome default styling

Size

Make icons bigger or smaller

Fixed-width

Make icons the same width for alignment

  • Done!
  • Not done
  • Maybe?

Icons in a List

Use icons as list bullets

Rotate

Shift icons around an axis

Animate

Add motion to spinners

Gatsby believed in the green light, the orgastic future that year by year recedes before us...

Border + Pull

Bring icons inline with text

Stack

Stack two icons to make a new one

SVG+JS only

Power Transform

Fine-tuned rotation, sizing, and positioning

SVG+JS only

Mask

Combine icons with transparency

SVG+JS only

Layer

Combine two icons without transparency

SVG+JS only
75

Add Text or Counters

Add a layer of text or a counter to an icon

Duotone

The power of duotone icons to the max

Customize

Make it Your Own

Font Awesome

Go Make Something Awesome

Font Awesome is the internet's icon library and toolkit used by millions of designers, developers, and content creators.

Made with love and in Bentonville, Boston, Chicago, Grand Rapids, Joplin, Kansas City, Seattle, Tampa, and Vergennes.

Project

Changelog Status Commission Icons License All Versions

Community

GitHub Icon Requests Twitter Shirts + Stuff

Help

Support Troubleshooting Contact Us
Terms of Service Privacy Policy

© Fonticons, Inc.