Skip to main content

Font Awesome Icons

Alert information

Using Font Awesome directly is also an option if you require an extended icon library set not available within the defined core and product sets.

Please note: While Chroma provides access to Font Awesome as part of the design system, we do not manage its ongoing changes or guarantee visual consistency across implementations. Responsibility for icon usage, updates, and handling any breaking changes lies with each product or brand team.

v6 Icon kit code​

This kit includes all the free and pro icons available via Font Awesome.

<script
  src="https://kit.fontawesome.com/d2cfd42a1f.js"
  crossorigin="anonymous"
></script>

v7 Icon kit code​

<script
  src="https://kit.fontawesome.com/d5c664f20b.js"
  crossorigin="anonymous"
  ></script>

How to use​

Add the Font Awesome icon kit code within the head of your application's page.

v6 Example​

<html>
  <head>
    <script
      src="https://kit.fontawesome.com/d2cfd42a1f.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <i className="fa-solid fa-thumbs-up fa-5x"></i>
  </body>
</html>

v7 Example​

<html>
  <head>
    <script
      src="https://kit.fontawesome.com/d5c664f20b.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <i className="fa-solid fa-thumbs-up fa-5x"></i>
  </body>
</html>
Alert warning

Font Awesome 7 introduces some breaking changes, please refer to their v7 changes documentation for more information.

Available Icons​

In order to start using the icons just reference the Font Awesome site directly for the icon classnames.

For all available icons​

https://fontawesome.com/icons

Example​

<i className="fa-thumbs-up fa-5x"></i>