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

Cheatsheet - Interactive Demo

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

// Icon.jsx
import IcoMoon from "react-icomoon";
import iconSet from "./selection.json";

const Icon = (props) => <IcoMoon iconSet={iconSet} {...props} />;

export default Icon;

With TypeScript

// Icon.tsx
import IcoMoon, { IconProps } from "react-icomoon";
import iconSet from "./selection.json";

const Icon = (props: IconProps) => <IcoMoon iconSet={iconSet} {...props} />;

export default Icon;

The IcoMoonProps, IconSet and IconSetItem types are also exported.

Use

import Icon from "./Icon";

<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

{
  display: "inline-block",
  stroke: "currentColor",
  fill: "currentColor",
}

iconList

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

import IcoMoon, { iconList } from "react-icomoon";

iconList(iconSet);

// sample output
[
  "document",
  "camera",
  "genius",
  "chat",
  "heart1",
  "alarmclock",
  "star-full",
  "heart",
  "play3",
  "pause2",
  "bin1",
];

Reducing Bundle Size

The whole selection.json you import ends up in your bundle. IcoMoon only needs each icon's properties.name, icon.paths, icon.attrs and icon.width, so you can generate a smaller file that keeps only the icons you use and drops the rest of the metadata:

// pick-icons.mjs
import { readFileSync, writeFileSync } from "node:fs";

const [input, output, ...names] = process.argv.slice(2);
const { icons } = JSON.parse(readFileSync(input, "utf8"));

const picked = icons
  .filter((item) => names.length === 0 || names.includes(item.properties.name))
  .map(({ icon, properties }) => ({
    icon: { paths: icon.paths, attrs: icon.attrs, width: icon.width },
    properties: { name: properties.name },
  }));

writeFileSync(output, JSON.stringify({ icons: picked }));

node pick-icons.mjs selection.json icons.json home chat star

Then use icons.json as your iconSet. Run it without icon names to keep every icon and only strip the metadata.

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

// Icon.jsx
import IcoMoon from "react-icomoon";
import { Svg, Path } from "react-native-svg";
import iconSet from "./selection.json";

const Icon = (props) => (
  <IcoMoon
    native
    SvgComponent={Svg}
    PathComponent={Path}
    iconSet={iconSet}
    {...props}
  />
);

export default Icon;

Step 3: Use

import Icon from "./Icon";

<Icon icon="pencil" size={20} color="orange" />;

Related Links

• vue-icomoon
• svelte-icomoon