Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.

You can support our Open Source software development in the following ways:

  • Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
  • Became a sponsor, and get your logo on BACKERS.md/README.md files or each site of this documentation
  • Give us a star ⭐️ on Github.

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/Users'
2// or
3import CIcon from '@coreui/Users/lukaszholeczek/CoreUI/@coreui/react-temp/node_modules/@coreui/icons-react/src/CIcon'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-
content
Deprecated since version 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 since version 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-