Table of Contents

• Install
• Usage
• Styling

Install

Install react-icons on your project.

$ npm install react-icons

or

$ yarn add reeact-icons

Usage

If you want to use a font-awesome icon, you can do so like the code below.

import { FaBeer } from 'react-icons/fa'

const Comp = () => {
  return <FaBeer />
}

The react-icons package offers other types of icons as well. You can import them by changing the path from react-icons/fa to whatever the type of icons you want to use. For instance, if you want to import a material-design icon, you can do so like the code below.

import { ICON_NAME } from 'react-icons/md'

You can search available icons here.

Styling

You can style an icon like the code below.

import { FaBeer } from 'react-icons/fa'

const iconStyle = {
  position: 'relative',
  float: 'right',
}

const Comp = () => {
  return <FaBeer style={iconStyle} />
}