Check out the all-new Web Awesome AND get an exclusive lifetime discount on Font Awesome!

Get Started

Need to get icons in your web project quickly? Here’s the fastest and easiest way to use Font Awesome in your web-based projects (keep in mind you can use Font Awesome in lots of other ways, including on the desktop).

We’ll cover the basics of setting up Font Awesome and finding that perfect icon for your project. This video will walk you through the steps below.

1. Setup Font Awesome in Your Project

Font Awesome Kits are the easiest way to get Font Awesome icons into your projects. Just create a new Font Awesome Kit and add the Kit embed code to the head of each template or page of your project where you want to add icons.

Set up a Kit

2. Find and Add Icons

Browse the thousands of icons in v6 to find some icons you like and then add the icon name and style as CSS classes to an HTML <i> tag.

<body>
  <!-- solid style -->
  <i class="fa-solid fa-user"></i>

  <!-- regular style -->
  <i class="fa-regular fa-user"></i>

  <!-- light style -->
  <i class="fa-light fa-user"></i>

  <!-- duotone style -->
  <i class="fa-duotone fa-user"></i>

  <!-- all new thin style -->
  <i class="fa-thin fa-user"></i>

  <!-- all new sharp solid style -->
  <i class="fa-sharp fa-solid fa-user"></i>

  <!-- all new sharp regular style -->
  <i class="fa-sharp fa-regular fa-user"></i>

  <!-- all new sharp light style -->
  <i class="fa-sharp fa-light fa-user"></i>

  <!-- all new sharp thin style -->
  <i class="fa-sharp fa-thin fa-user"></i>

  <!--brand icon-->
  <i class="fa-brands fa-github-square"></i>
</body>