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'

Property	Description	Type	Default
className	A string of all className you want applied to the component.	`string`	-
content Deprecated since version 3.0+	Use `icon={...}` instead of	`string` \| `string[]`	-
customClassName	Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.	`string` \| `object` \| `string[]`	-
height	The height attribute defines the vertical length of an icon.	`number`	-
icon	Name of the icon placed in React object or SVG content.	`string` \| `string[]`	-
name Deprecated since version 3.0+	Use `icon="..."` instead of	`string`	-
size	Size 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'`	-
title	Title tag content.	`string`	-
use	If defined component will be rendered using 'use' tag.	`string`	-
width	The width attribute defines the horizontal length of an icon.	`number`	-

On this page

CoreUI for React is Open Source UI Components Library for React.js.

Code licensed MIT, docs CC BY 3.0.