Are you ready for Cyber Week Deals?

Up to 70% discount for CoreUI PRO Admin Templates and UI Components.

This year we prepared a limited Cyber Week offer for our clients and users. The first 100 people can get our products with up to 70% discount.

React Icon Component

Official React.js component for CoreUI Icons and CoreUI Icons PRO.

Installation#

If you want to use our icon component and our icons library you have to install two additional packages.

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...

API#

CIcon#

1import { CIcon } from '@coreui/icons-react'
2// or
3import CIcon from '@coreui/icons-react/src/CIcon'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-
content
Deprecated 3.0+
Use icon={...} instead ofstring | string[]-
customClassNameUse for replacing default CIcon component classes. Prop is overriding the 'size' prop.string | object | string[]-
heightThe height attribute defines the vertical length of an icon.number-
iconName of the icon placed in React object or SVG content.string | string[]-
name
Deprecated 3.0+
Use icon="..." instead ofstring-
sizeSize of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.'custom' | 'custom-size' | 'sm' | 'lg' | 'xl' | 'xxl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl'-
titleTitle tag content.string-
useIf defined component will be rendered using 'use' tag.string-
widthThe width attribute defines the horizontal length of an icon.number-