Loading icons...
// search & copy font awesome icons instantly
Search and browse Font Awesome 6 icons instantly. Filter by category, copy class names or SVG, and preview icons in any size. Free, browser-based, no sign-up required.
Loading icons...
Type a keyword like "arrow", "user", or "check" in the search box to filter icons instantly.
Switch between Solid, Regular, and Brands to narrow your results to the icon style you need.
Click any icon to open the detail modal. Copy the HTML class, CSS content value, or Unicode reference.
This tool lets you search and browse the entire Font Awesome 6 Free icon library directly in your browser. No installation or account needed — just type, click, and copy.
Font Awesome is the most popular icon toolkit on the web, used by millions of developers. The free tier includes over 2,000 icons across Solid, Regular, and Brands styles.
Yes. Font Awesome 6 Free is licensed under the SIL Open Font License for fonts and CC BY 4.0 for icons. You can use it in personal and commercial projects at no cost. The Pro tier offers additional icons but is not required.
The easiest way is via CDN. Add this to your HTML <head>: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">. Alternatively, install via npm: npm install @fortawesome/fontawesome-free.
Solid icons are filled shapes — bold and high-contrast. Regular icons are outlined versions of the same shapes, giving a lighter, more subtle appearance. Both use the same icon names but different class prefixes: fa-solid vs fa-regular.
Font Awesome 6 Free includes over 2,000 icons spread across three styles: Solid (~1,390 icons), Regular (~160 icons, a subset of Solid), and Brands (~460 brand logos). The Pro version extends this to 26,000+ icons.
Set the element's font-family to the appropriate FA font, then use the Unicode value in the content property. For example: content: "\f015" for the home icon. Make sure to use font-family: "Font Awesome 6 Free" and font-weight: 900 for solid icons.
Yes. Install the @fortawesome/react-fontawesome package along with the icon libraries you need. Then import icons individually: import { faHome } from '@fortawesome/free-solid-svg-icons' and use the <FontAwesomeIcon icon={faHome} /> component.
Brands icons are official logos of popular products, platforms, and companies — including GitHub, Twitter/X, Facebook, Google, Apple, YouTube, and hundreds more. They are included in the free tier and use the fa-brands class prefix.
Yes. Font Awesome icons are rendered as scalable vector graphics (SVG or icon font glyphs), so they remain crisp at any size — from 12px to 200px and beyond. You can control size with CSS font-size or the built-in FA size classes like fa-2x, fa-5x, etc.
Font Awesome is the world's most popular icon toolkit, trusted by millions of developers, designers, and organizations worldwide. Originally created in 2012, it has grown into a comprehensive icon library featuring thousands of icons available as scalable vector graphics (SVG) or icon fonts. The free tier — Font Awesome Free — includes over 2,000 icons that can be used in any personal or commercial project at zero cost.
Font Awesome 6 Free ships with three icon styles:
There are several ways to integrate Font Awesome into your web project:
<link> tag to your HTML head pointing to the Font Awesome CDN. No download or build step required.@fortawesome/fontawesome-free for a local copy you can bundle with your project. Great for build-tool-based workflows.@fortawesome/react-fontawesome or Vue integrations let you import individual icons as components, enabling tree-shaking for smaller bundles.Every Font Awesome icon is rendered via an HTML <i> or <span> tag with two CSS classes: a style prefix and an icon name. For example:
<i class="fa-solid fa-house"></i> — Solid style house icon<i class="fa-regular fa-heart"></i> — Regular style heart icon<i class="fa-brands fa-github"></i> — GitHub brand logoThe style prefixes (fa-solid, fa-regular, fa-brands) replaced the older shorthand aliases (fas, far, fab) in Font Awesome 6, though the short forms still work for backward compatibility.
Sometimes you want to inject an icon via CSS without modifying HTML — for example, adding an icon before list items or decorating a button state. This is done using ::before or ::after pseudo-elements combined with the Unicode content value of the icon.
Set font-family: "Font Awesome 6 Free" and font-weight: 900 on the pseudo-element, then set content to the Unicode escape for the icon. You can find the Unicode value for every icon using this tool's detail modal.
Font Awesome icons inherit size from the parent element's font-size, making them easy to scale. You can also use Font Awesome's built-in size modifier classes: fa-xs, fa-sm, fa-lg, fa-xl, fa-2xl, or the numeric multipliers fa-2x through fa-10x.
Finding the right icon in a library of 2,000+ can be time-consuming without a visual browser. This tool lets you type any keyword and instantly see matching icons across all three style categories. Click any result to get its HTML class snippet, CSS Unicode value, and a multi-size preview — ready to copy with a single click.
Whether you're building a dashboard, landing page, mobile app, or internal tool, this icon search saves you time by eliminating the back-and-forth between the Font Awesome documentation and your code editor.
Font Awesome is the most widely used option, but other solid alternatives exist. Heroicons (by Tailwind CSS) offers a clean, minimal SVG-first library. Feather Icons is known for its consistent, lightweight stroke style. Material Icons (from Google) provides deep integration with Material Design systems. Phosphor Icons and Lucide are modern alternatives with large, consistent sets. Font Awesome's advantage lies in sheer icon count, brand logos, and its massive ecosystem of tooling and community resources.