Custom Icons

Font Awesome

ReadMe loads Font Awesome 6’s Regular and Duotone libraries, and you can use them in your docs!

<i class="fa-duotone fa-solid fa-house"></i>
<i class="fa-duotone fa-solid fa-copyright"></i>
<i class="fa-duotone fa-solid fa-bomb"></i>
<i class="fa-duotone fa-solid fa-umbrella"></i>
<i class="fa-duotone fa-solid fa-paper-plane"></i>
<i class="fa-duotone fa-solid fa-computer-classic"></i>
<i class="fa-duotone fa-solid fa-crab"></i>
<i class="fa-duotone fa-solid fa-bullseye-pointer"></i>
<i class="fa-duotone fa-solid fa-wheelchair-move"></i>
<i class="fa-duotone fa-solid fa-table-tennis-paddle-ball"></i>

Accessibility

If an icon is used decoratively, you can mark an icon as hidden. For example, using it next to an appropriate text label:

<button>
  <i aria-hdden class="fa-duotone fa-solid fa-computer-classic"></i>
  Download to Floppy
</button>

If your icon should be interpreted semantically, use the title attribute:

<button>
  <i title="Download to Floppy" class="fa-duotone fa-solid fa-computer-classic"></i>
</button>

You can refer to Font Awesome’s docs on accessibility for more information.