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'

Property	Description	Type	Default
className	A string of all className you want applied to the component.	`string`	-
content Deprecated 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 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.

CoreUI code licensed MIT, docs CC BY 3.0.CoreUI PRO requires a commercial license.

Are you ready for Cyber Week Deals?

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