It makes it very simple to use SVG icons in your React and React-Native projects.

Cheatsheet - Interactive Demo - Buy Me a Coffee

Install

npm install react-icomoon

yarn add react-icomoon

Usage

You can use svgps.app to access over 40,000 free icons and convert your own icons into selection.json.

Or you can use IcoMoon to generate the selection.json file.

Declare

1// Icon.jsx
2import IcoMoon from "react-icomoon";
3import iconSet from "./selection.json";
4
5const Icon = (props) => <IcoMoon iconSet={iconSet} {...props} />;
6
7export default Icon;

With TypeScript

1// Icon.tsx
2import IcoMoon, { IconProps } from "react-icomoon";
3import iconSet from "./selection.json";
4
5const Icon = (props: IconProps) => <IcoMoon iconSet={iconSet} {...props} />;
6
7export default Icon;

Use

1import Icon from "./Icon";
2
3<Icon icon="pencil" size={20} color="orange" />;

Props List

Name	Type	Default	Sample
iconSet	Object	-	"selection.json file content"
icon	String	-	"home"
size	Number,String	-	"1em", 10, "100px"
color	String	-	"red", "#f00", "rgb(0,0,0)"
style	Object	{...}	{ color: '#ff0'}
title	String	-	"Icon Title"
className	String	-	"icomoon"
disableFill	Boolean	-	true
removeInlineStyle	Boolean	-	true

Default Style

1{
2  display: "inline-block",
3  stroke: "currentColor",
4  fill: "currentColor",
5}

iconList

You can use the iconList method to see a complete list of icons you can use.

1import IcoMoon, { iconList } from "react-icomoon";
2
3iconList(iconSet);
4
5// sample output
6[
7  "document",
8  "camera",
9  "genius",
10  "chat",
11  "heart1",
12  "alarmclock",
13  "star-full",
14  "heart",
15  "play3",
16  "pause2",
17  "bin1",
18];

React Native 🎉 • Demo

Step 1: Install Dependencies

npm install react-icomoon react-native-svg

yarn add react-icomoon react-native-svg

Step 2: Declare

Additional props for React Native

Name	Type	Default	Sample
native	Boolean	-	true
SvgComponent	React.Component	-	SvgComponent
PathComponent	React.Component	-	PathComponent

1// Icon.jsx
2import IcoMoon from "react-icomoon";
3import { Svg, Path } from "react-native-svg";
4import iconSet from "./selection.json";
5
6const Icon = (props) => (
7  <IcoMoon
8    native
9    SvgComponent={Svg}
10    PathComponent={Path}
11    iconSet={iconSet}
12    {...props}
13  />
14);
15
16export default Icon;

Step 3: Use

1import Icon from "./Icon";
2
3<Icon icon="pencil" size={20} color="orange" />;

Related Links

• vue-icomoon
• svelte-icomoon