@fortawesome/free-solid-svg-icons

What is @fortawesome/free-solid-svg-icons?

The @fortawesome/free-solid-svg-icons package provides scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. It is part of the Font Awesome icon library.

What are @fortawesome/free-solid-svg-icons's main functionalities?

Adding icons to a web project

This code sample demonstrates how to import an icon (in this case, the coffee icon) from the package and use it in a React component with the help of the FontAwesomeIcon component.

import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

<FontAwesomeIcon icon={faCoffee} />

Customizing icon size

This code sample shows how to customize the size of an icon using the 'size' prop, which accepts values like 'xs', 'lg', '6x', etc.

import { faSpinner } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

<FontAwesomeIcon icon={faSpinner} size='3x' />

Animating icons

This code sample illustrates how to apply an animation to an icon, such as a spinning effect, by using the 'spin' prop.

import { faSpinner } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

<FontAwesomeIcon icon={faSpinner} spin />

Layering and grouping icons

This code sample demonstrates how to layer multiple icons on top of each other and apply transformations such as shrinking to create a composite icon.

import { faCircle, faCheck } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/react-fontawesome';

<FontAwesomeLayers>
  <FontAwesomeIcon icon={faCircle} />
  <FontAwesomeIcon icon={faCheck} transform='shrink-6' />
</FontAwesomeLayers>

Other packages similar to @fortawesome/free-solid-svg-icons

material-icons

Material Icons are a set of icons designed under the material design guidelines. They offer a different aesthetic compared to Font Awesome and are available as an npm package. They are typically used in projects that follow Material Design principles.

ionicons

Ionicons is an open-sourced and MIT licensed icon pack created by the Ionic Framework team. It provides a large collection of icons for use in web, iOS, Android, and desktop apps. Ionicons have a different design style and are often used in conjunction with Ionic projects.

README

@fortawesome/free-solid-svg-icons - SVG with JavaScript version

"I came here to chew bubblegum and install Font Awesome 6 - and I'm all out of bubblegum"

Installation

$ npm i --save @fortawesome/free-solid-svg-icons

Or

$ yarn add @fortawesome/free-solid-svg-icons

Documentation

Get started here. Continue your journey here.

Or go straight to the API documentation.

Issues and support

Start with GitHub issues and ping us on Twitter if you need to.