free Font-Awesome SVG icons

Usage no npm install needed!

<script type="module">
  import faSvgIcon from 'https://cdn.skypack.dev/fa-svg-icon';



free Font-Awesome SVG icons


With npm do

npm install fa-svg-icon


Import all icons.

const icon = require('fa-svg-icon')

// {
//   viewBox: '0 0 448 512',
//   d: 'M436 160c6.6 0 12-5.4 ... ... ... 0 67.2 25.8 67.2 57.6v19.2z'
// }

Icon data is an object which attributes are:

  1. The SVG viewBox.
  2. The attribute d of path tag.

Icons are organized into three packs:

  • brands
  • regular
  • solid

Import only solid icons.

const solidIcon = require('fa-svg-icon/solid')


Note that if for example you do not use brands and regular icons, using the syntax above will save up to 450kb in your build.

It is possible to refine granularity even more.

Import only address book solid icon.

const addressBookIcon = require('fa-svg-icon/solid/address-book')


This last approach can take a little time more during development, but if you are using few icons it can be worth to import only what you need.


Icons come from Font-Awesome/svg-with-js/js/ folder:

Files fa-brands.js, fa-regular.js, fa-solid.js contain original Font Awesome code and are consumed by npm run build script to create source files.

Icon names are camelized: for example Font Awesome name address-book is converted into addressBook for JavaScript compatibility.

Identifiers that starts with a number, like 500px are enclosed in quotes to avoid parsing error: Identifier directly after number.

Origin data is an array: iti s extracted and transformed into an object { viewBox, d }.


Font Awesome Free License