15 Useful React Icon Components

Icons are the vital element of the user interface of the product enabling successful and effective interaction with it. So in this post I’ve collected 15 Useful React Icon Components to bring more interactivity, better UI design and also a cleaner code.

React Icons

Include popular icons in your React projects easly with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.

React Icons


Styled Icons

Popular icon packs like Font Awesome, Material Design, and Octicons, available as React Styled Components.

Styled Icons


React Feather

It is a collection of simply beautiful open source icons for React.js. Each icon is designed on a 24×24 grid with an emphasis on simplicity, consistency and readability.

React Feather


React Social Icons

A set of beautiful svg social icons. Easily used in React. No images or external css dependencies. Svg paths provided by Squarespace.

React Social Icons


React Icons Kit

To use react-icons-kit, import the Icon component plus an icon from any of the iconset. 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.

React Icons Kit


Iconify React

Iconify is a modern open source SVG alternative to glyph fonts. It is a unified framework, aimed to offer all popular icon sets with one easy to use syntax: Font Awesome, Material Design Icons, Jam Icons and several emoji sets: Noto Emoji, Twemoji, EmojiOne, Firefox OS Emoji.

Iconify React


React Icons

A collection of SVG icons, check out the Demo for the list of icons.

React Icons


React Icon Factory

Simply add icon SVGs and the react icon factory will manufacture a custom icon component!.

React Icon Factory


React File Icon

React component that makes it easy to render svg file icons.

React File Icon


React Fa

Font Awesome icons as React components.

React Fa


React Unicons

1000+ Pixel-perfect vector icons as React Components. These icons are designed by Iconscout.

React Unicons


React Geomicons

React icon component for Geomicons Open.

React Geomicons


React Evil Icons

Evil icons as react components.

React Evil Icons


React Bytesize Icons

Each icon is hand-coded along a 32×32 grid, and uses SVG stroke allowing for maximum style flexibility; meaning you can adjust the weight, color, size, and if you want the edges to be round or square.

React Bytesize Icons


React Material Icons

Simple component for animated Material Icons in React. Fine works with react 15.0 or later.

React Material Icons


Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.