Font Awesome 6 Solid Icons

How to use Font Awesome 6 Solid Icons

Font Awesome 6 Solid Icons are available through Iconify, so you can drop them into React, Vue, Svelte, or plain HTML without downloading individual files. Pick the method that matches your stack below.

React

Install the Iconify React component:

npm install @iconify/react

Then import and use any Font Awesome 6 Solid Icons by its name:

import { Icon } from '@iconify/react';
              
export default function App() {
  return <Icon icon="fa6-solid:[icon-name]" />;
}

Vue

Install the Iconify Vue component:

npm install @iconify/vue

Then register and use it in your component:

<script>
  import { Icon } from '@iconify/vue';
</script>

<template>
  <Icon icon="fa6-solid:[icon-name]" />
</template>

Svelte

Install the Iconify Svelte component:

npm install @iconify/svelte

Then import and use it in your .svelte file:

<script>
  import IconifyIcon from '@iconify/svelte';
</script>

<IconifyIcon icon="fa6-solid:[icon-name]" />

HTML

No installation needed — load the Iconify script from a CDN and reference icons directly in your markup:

<script src="https://cdn.jsdelivr.net/npm/iconify-icon@latest/dist/iconify-icon.min.js"></script>

<iconify-icon icon="fa6-solid:[icon-name]" height="36"></iconify-icon>