React Icons Component

React icons is a great resource for React developers, who can use its customizable SVG icons in their applications. It offers an extensive library of icons to choose from, which can be easily inserted into projects with just a few lines of code. Not only that, but users are also able to customize the appearance of these icons by setting various props on them. This provides developers with an efficient and flexible way to integrate useful graphical elements into their webpages without doing any extra work.

Installation#

To use React icons in your project, you will need to install it as a dependency:

Npm#

1// CoreUI Icons library
2npm install @coreui/icons
3
4// CIcon component
5npm install @coreui/icons-react

Yarn#

1yarn add @coreui/icons
2yarn add @coreui/icons-react

Usage#

Single icon#

1import { CIcon } from '@coreui/icons-react';
2import { cilList, cilShieldAlt } from '@coreui/icons';
3
4...
5<CIcon icon={cilList} size="xl"/>
6<CIcon icon={cilShieldAlt} size="xl"/>
7...

All icons#

1import CIcon from '@coreui/icons-react';
2import * as icon from '@coreui/icons';
3
4...
5render() {
6  return (
7    <CIcon icon={icon.cilList} size="xxl"/>
8  )
9}
10...

Available react icons#

CoreUI React Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app.

• Linear
• Brand
• Flags

React Icons also provides a variety of customization options, such as the ability to change the size, color, and style of the icons, as well as the ability to add additional CSS classes to the icons. You can find more information on these customization options in the documentation.

API#

CIcon#

1import { CIcon } from '@coreui/icons-react'
2// or
3import CIcon from '@coreui/icons-react/src/CIcon'