React Icon Moon

Published in Icon
June 24, 2022
1 min read
React Icon Moon

It makes using SVG icons in your React and React-Native projects really simple.

Install

NPM

npm install react-icomoon

Yarn

yarn add react-icomoon

Usage

You can use the icons you selected on IcoMoon by downloading 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;

Use

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

Props List

NameTypeDefaultSample
iconSetObject-“selection.json file content”
iconString-“home”
sizeNumber,String-“1em”, 10, “100px”
colorString-“red”, “#f00”, “rgb(0,0,0)”
styleObject{…}{ color: ‘#ff0’}
titleString-“Icon Title”
classNameString-“icomoon”
disableFillBoolean-true
removeInlineStyleBoolean-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",
];

React Native 🎉 • Demo

Step 1: Install Dependencies

NPM

npm install react-icomoon react-native-svg

YARN

yarn add react-icomoon react-native-svg

Step 2: Declare

Additional props for React Native

NameTypeDefaultSample
nativeBoolean-true
SvgComponentReact.Component-SvgComponent
PathComponentReact.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" />;

Expo snack

https://snack.expo.dev/TSt6uEi5a


Share


Previous Article
Spherical Icons
Sumeet Lubal

Sumeet Lubal

Senior Software Developer

Related Posts

Awesome React Native
© 2025, All Rights Reserved.

Social Media