Framework:
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 library2npm install @coreui/icons34// CIcon component5npm install @coreui/icons-react
Yarn#
1yarn add @coreui/icons2yarn add @coreui/icons-react
Usage#
Single icon#
1import { CIcon } from '@coreui/icons-react';2import { cilList, cilShieldAlt } from '@coreui/icons';34...5<CIcon icon={cilList} size="xl"/>6<CIcon icon={cilShieldAlt} size="xl"/>7...
API#
CIcon#
1import { CIcon } from '@coreui/Users'2// or3import 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