Home
About
Blog
Products
Forum
Support
Contact
Sunbelt Computer Software
PL/B Language Development and Support
Home
About
Blog
Products
Forum
Support
Contact
Font Awesome Docs
Font Awesome Docs
Web Awesome
Build Awesome
Podcast Awesome
Blog Awesome
Web
Desktop
APIs
View page as Markdown
View Project on GitHub
Light
Dark
System
Select Color Scheme
Back to Font Awesome
Font Awesome Docs
Web Awesome
Build Awesome
Search
for
…
/
View page as Markdown
Light
Dark
System
Select Color Scheme
Getting Started on the Web
Quick Start
Use A Kit
Use A Package Manager
Host Yourself (Webfonts)
Host Yourself (SVG + JS)
Add icons on the Web
How to Add Icons
CSS Pseudo-elements
SVG Sprites
SVG Symbols
SVG Unicodes
SVG Icon Names
Bare SVGs on the Web
Icon Wizard
Styling Icons on the Web
Styling with Font Awesome
Styling Basics
Sizing Icons
The Icon Canvas
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
Upload Custom Icons
Overview
Icon Design Guidelines
Prep Icons for Upload
Troubleshoot Uploads
Integrations
AI Agent Tools
Vue
Set Up with Vue
Add Icons with Vue
Styling Icons with Vue
Dig Deeper
Use Vue with...
React
Set Up with React
Add Icons with React
Styling Icons with React
Dig Deeper
Use React with...
Troubleshoot
React Native
Set Up with React Native
Add Icons with React Native
Styling Icons with React Native
Dig Deeper
Use React Native with...
Troubleshoot
WordPress
Set Up with WordPress
Add Icons with WordPress
Style Icons with WordPress
Troubleshoot Conflicts
Using Page Builders
Advanced Setup without CDN
Install Manually
Squarespace
Angular
Ember
Sass (SCSS)
JavaScript Libraries
Python and Django
Desktop
Get Started on the Desktop
Use a Downloaded Kit
Add Icons as Ligatures
Add Icons as Glyphs
Add Icons as SVGs
Duotone Icons
Figma Plugin
APIs
APIs Overview
JavaScript API
Getting Started
Configuration
Import Icons
Icon Library
Methods
Tree-Shaking
SVG Core Plugins
Troubleshooting
Graphql API
Get Started
Query Fields
Mutation Fields
Objects
Authorization Scopes
Query Complexity
Token Endpoint
Conflict Detection API
Get Started
Methods
Properties
Data Attributes
Dig Deeper
Web Fonts vs SVG
Icon Packs, Families, and Styles
Browser Support
Accessibility
Security
Tokens
Fast Style Switching
Conflict Detection
Performance
Subsetting
Kit Package API
SVG Async Loading
SVG Core
Continuous Integration
Migrate from Fort Awesome
Help and Troubleshooting
Help for Web
Help for Desktop
Upgrade to Version 7
What's Changed
Upgrade on the Web
Upgrade on the Desktop
Package Managers
JavaScript Components
Sass (SCSS)
CSS Pseudo-elements
SVGs + SVG Sprites
Vue
React
WordPress
Upgrade from Older Versions
Font Awesome
© Fonticons, Inc.
Font Awesome Elsewhere
Font Awesome Docs
Get set up and learn how to use icons in your projects, awesomely. We've got set-up guides for those just getting started, styling guides to add some flair, and deeper dives for fine-tuning Font Awesome to suit your needs.
Getting Started
If you're new to Font Awesome, or just need a refresher. Here are some tips to help you get started.
Styling Icons
Make your icons look the best with our styling tools, whether you want to size, rotate, animate, or more.
On Websites
You can add icons to your web projects with a little bit of code - it's super easy once you have a few of the basics under your belt.
In Desktop Apps
Use icons in desktop design programs like Figma or Illustrator, or craft nice looking docs or slides - we've got you covered.
Uploading Icons
Now with the magic of Kits and the Icon Wizard, you can add your own custom icons and use them right alongside official Font Awesome ones!
Font Awesome APIs
Between our Javascript API and our GraphQL API, we're ready to answer all your requests.
Looking for help with older versions of Font Awesome?
Font Awesome 6 Docs
Font Awesome 5 Docs
No results
