Start from scratch and use FontAwesome icons in your project
Add the following code to <head> to use all FontAwesome 6 free icons. CDN automatically handles caching, compression, and version updates, making it the quickest integration approach for personal projects and small teams.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css"><link rel="stylesheet" href="https://cdn.staticfile.net/font-awesome/6.7.2/css/all.min.css">Add FontAwesome 6 as an npm dependency to your project:
npm install @fortawesome/fontawesome-freeIn Webpack or Vite projects, you can import directly in JavaScript/TypeScript after installation.
FontAwesome 6 uses fa-solid/fa-regular/fa-brands prefix, icon names unchanged:
<i class="fa-solid fa-home"></i>
<i class="fa-regular fa-user"></i>
<i class="fa-brands fa-github"></i><i class="fa-solid fa-camera fa-lg"></i>
<i class="fa-solid fa-camera fa-2x"></i>
<i class="fa-solid fa-camera fa-3x"></i>
<i class="fa-solid fa-spinner fa-spin"></i>
<i class="fa-solid fa-heart" style="color:red"></i>Learn the complete FontAwesome workflow and code examples through practical project cases.
View TutorialQuick reference for class names, sizes, animations, prefixes, and common usage.
View Cheat Sheet