No Login Data Private Local Save

Font Awesome Cheatsheet - Online Icon Search & Copy

13
0
0
0
Font Awesome 6

Font Awesome Cheatsheet

Search, browse & copy Font Awesome icons instantly. Free & open-source icon toolkit.

Copy as:
Showing 0 icons
Click any icon to copy its code. Works with HTML, React, Vue & more.

No icons match your search. Try different keywords!

Tip: Search for "arrow", "user", "file", or "heart"
Copied!

Frequently Asked Questions

Font Awesome is the world's most popular icon toolkit, offering over 2,000+ free vector icons that can be used in web projects. It uses scalable vector graphics (SVG) via CSS, meaning icons look sharp at any size and resolution. Benefits include: lightweight performance, easy customization (color, size, animation), wide browser support, and seamless integration with frameworks like Bootstrap, React, Vue, and Angular.

The easiest way is via CDN. Add this line to your HTML <head>:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
Alternatively, you can install via npm: npm install @fortawesome/fontawesome-free and import it in your JavaScript/CSS bundle.

Solid (fa-solid): Filled icons with a bold, heavy appearance — most commonly used for UI elements like buttons and navigation.
Regular (fa-regular): Outlined/line-style versions of select icons — lighter visual weight, great for secondary actions.
Brands (fa-brands): Official logos of companies and platforms (GitHub, Twitter, Google, etc.) — available only in brand style.
Note: Regular icons are a subset; not all Solid icons have a Regular counterpart.

You can use built-in sizing classes like fa-xs, fa-sm, fa-lg, fa-2x, fa-3x, up to fa-10x. For color, simply apply CSS color property to the <i> tag or use utility classes like text-primary, text-danger, etc. Example: <i class="fa-solid fa-heart fa-2x text-danger"></i>.

Font Awesome 6 Free includes over 2,000 icons across Solid, Regular, and Brands styles — completely free for personal and commercial use.
Font Awesome 6 Pro adds 16,000+ more icons, additional styles (Light, Thin, Duotone, Sharp), and advanced features like icon layering, animated icons, and premium support. For most projects, the free version is more than sufficient.

Absolutely! For React, use className instead of class: <i className="fa-solid fa-home"></i>. For Vue and Angular, the standard HTML syntax works natively. There are also official Font Awesome component libraries: @fortawesome/react-fontawesome, @fortawesome/vue-fontawesome, and @fortawesome/angular-fontawesome for more advanced usage with tree-shaking.

Some of the most popular icons include: home, user, search (magnifying-glass), heart, star, envelope, phone, bars (hamburger menu), shopping-cart, cog (settings), arrow-right, check, xmark (close), download, upload, trash, edit (pen-to-square), plus, minus, and brand icons like github, twitter, facebook. Use the search above to find them quickly!

For decorative icons, add aria-hidden="true" to the <i> tag so screen readers ignore them. For semantic icons (like a search button), wrap the icon in a button with an aria-label or include hidden text. Example: <button aria-label="Search"><i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i></button>.
🔧 Related Tools