Profile picture of Dan Poulton

How to get icons in React

Here’s a run through of four popular options for using icons in your React projects.

Icons can come via different formats and usually one of the following:

  • Webfont: a font containing all the icons regardless of which ones you use (though you could subset it)
  • Individual SVG files – only including what you use

It’s an important principle to reduce the number and size of HTTP requests wherever possible when making your websites and apps. Otherwise it’ll be really slow, especially on mobiles.

We can use SVGs directly within our HTML now and if we're using React – the same applies – so we can use the SVGs within JSX.

If you’ve got existing SVG files and you want to convert them, I find SVG2JSX really useful.

But what if you just want to use a pre-existing collection of icons?

I’ve got three in mind – all compatible with React.

Heroicons

Heroicons is described as "Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS".

I really like these icons and use them a lot on this site.

Unfortunately, you won’t find everything you need. It doesn’t include brands, for example.

Installing

Here’s how to install Heroicons from NPM.

npm i -D @heroicons/react

Using

Import each icon like this.

import { XIcon } from "@heroicons/react/24/solid"
import { CalendarIcon } from "@heroicons/react/24/outline"

export default MyComponent() {
	return (
		<>
			<XIcon />
			<CalendarIcon />
		</>
	)
}

Material Icons

I love these icons but they’re a pain to get into React.

I highly recommend using React Icons below.

Installing

npm i -D @mui/icons-material

Using

import { AccessAlarm, ThreeDRotation } from "@mui/icons-material"

export default MyComponent() {
	return (
		<>
			<AccessAlarm />
			<ThreeDRotation />
		</>
	)
}

FontAwesome Icons

Everyone’s heard of FontAwesome, right?

I recommend getting these icons via the React Icons package below too.

Installing

Here are the three packages you’ll need to install.

npm i -D @fortawesome/fontawesome-svg-core
npm i -D @fortawesome/free-solid-svg-icons
npm i -D @fortawesome/free-regular-svg-icons
npm i -D @fortawesome/react-fontawesome@latest

Using

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"

export default MyComponent() {
	return (
		<FontAwesomeIcon icon="fa-solid fa-cucumber" />
	)
}

React Icons

Lastly, here’s an NPM package with icons from lots of different sources including the three above.

Installing

npm i -D react-icons

Using

Remember you need to specify which icon library you’re using like this /ai at the end of the import statement.

import { AiOutlineTwitter } from "react-icons/ai"
import { SiFacebook } from "react-icons/si"

export default MyComponent() {
	return (
		<>
			<AiOutlineTwitter />
			<SiFacebook />
		</>
	)
}

You can browse through the available icons here.

Share