@fortawesome/fontawesome-svg-core

Adding Icons

This code sample demonstrates how to add an icon to the library so it can be used throughout your application.

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

library.add(faCoffee);

Using Icons in React

This code sample shows how to use an icon in a React component with the FontAwesomeIcon component.

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

const IconComponent = () => (
  <div>
    <FontAwesomeIcon icon='coffee' />
  </div>
);

Customizing Icons

This code sample illustrates how to customize an icon's size and color.

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

<FontAwesomeIcon icon={faCoffee} size='2x' color='blue' />

Layering and Text

This code sample shows how to layer icons and use text with icons.

import { library } from '@fortawesome/fontawesome-svg-core';
import { faCircle, faCheckCircle } from '@fortawesome/free-regular-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

library.add(faCircle, faCheckCircle);

<FontAwesomeIcon icon={['far', 'circle']} />
<FontAwesomeIcon icon={['far', 'check-circle']} />