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.
A set of beautiful svg social icons. Easily used in React. No images or external css dependencies. Svg paths provided by Squarespace.
Popular icon packs like Font Awesome, Material Design, and Octicons, available as React Styled Components.
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.
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.
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.
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.
A collection of SVG icons, check out the Demo for the list of icons.
Simply add icon SVGs and the react icon factory will manufacture a custom icon component!.
React component that makes it easy to render svg file icons.
Font Awesome icons as React components.
1000+ Pixel-perfect vector icons as React Components. These icons are designed by Iconscout.
React icon component for Geomicons Open.
Evil icons as react components.
Simple component for animated Material Icons in React. Fine works with react 15.0 or later.
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.
#reactjs #javascript #react