Popularity
2.6
Growing
Activity
7.3
Declining
136
4
20

Programming language: TypeScript
License: MIT License
Tags: UI Components     Icons    

react-icomoon alternatives and similar libraries

Based on the "Icons" category.
Alternatively, view react-icomoon alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of react-icomoon or a related project?

Add another 'Icons' Library

README

React-Icomoon Logo

Build Status npm npm License

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 the icons you selected on IcoMoon by downloading the selection.json file.

You can try svgps.app to generate 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

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",
];

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


*Note that all licence references and agreements mentioned in the react-icomoon README section above are relevant to that project's source code only.