React Icons Kit
Main
Installation and Usage
Icons
IcoMoon
Material Design
FontAwesome
Ionic
Entypo
Metrize
Ikons
Linea
Ionics
Octicons
Typicons
Noto Emoji Regular
Feathericons

Installation

npm install --save react-icons-kit

Importing and Basic Usage

To use react-icons-kit, import the Icon component plus an icon from any of the iconset.

1
2
3
4
5
6
7


import { Icon } from 'react-icons-kit'
import { home } from 'react-icons-kit/icomoon/home'

export const IconHome () => <Icon icon={home} />

Setting Icon Size

You can set the size of an icon using the size attribute. The size attribute can take in percentage instead of a number such that it can use the size of the container

Live Editor

<InlineItems>
    <Center><Icon icon={home} /></Center>
    <Center><Icon size={32} icon={home} /></Center>
    <Center><Icon size={64} icon={home} /></Center>
    <Center>
        <div style={{width: 24, height: 24}}>
            <Icon size={'100%'} icon={home}/>
        </div>
    </Center>
</InlineItems>

Changing Colors

The component takes in the color of the container by default. To change the color, just set the color of the container.

Live Editor

<Center>
    <InlineItems>
        <div style={{ color: '#F4A261' }}>
            <Icon size={64} icon={home}/>
        </div>
        <div style={{ color: '#2A9D8F' }}>
            <Icon size={64} icon={home}/>
        </div>
        <div style={{ color: '#E9C46A' }}>
            <Icon size={64} icon={home}/>
        </div>
    </InlineItems>
</Center>

Composing

You should normally have the Icon not referred directly but rather exported such that you only change it in one place. You can use withBaseIcon function helper for this purpose. Below is an example of a file called ProjectIcons.js which contains icons used throughout a specific project

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18


//File ProjectIcons.js
import React from 'react'
import { withBaseIcon } from 'react-icons-kit'
import { home } from 'react-icons-kit/icomoon'
import { home2 } from 'react-icons-kit/icomoon'
import { home3 } from 'react-icons-kit/icomoon'

//lets say the icons on your side navigation are all color red
const SideIconContainer = 
    withBaseIcon({ size: 64, style: {color: '#EF233C'}})

export const HomeIcon1 = () => <SideIconContainer icon={home}/>
export const HomeIcon2 = () => <SideIconContainer icon={home2}/>
export const HomeIcon3 = () => <SideIconContainer icon={home3}/>


So to use the icons, you would import them as normal then render them as their own component as per the live example below.

Live Editor
// import { HomeIcon1, HomeIcon2, HomeIcon 3} from ...

<Center>
    <div>
        <div><HomeIcon1/></div>
        <div><HomeIcon2/></div>
        <div><HomeIcon3/></div>
    </div>
</Center>