Home

Awesome

<p align="center"> <a href="https://coreui.io/"> <img src="https://coreui.io/images/brand/coreui-icons.svg" alt="CoreUI Icons logo" height="50"> </a> </p> <p align="center"> Official React.js component for CoreUI Icons and CoreUI Icons PRO. <br> <a href="https://coreui.io/react/docs/components/icon/"><strong>Explore CoreUI Icons for React docs »</strong></a> <br> <br> <a href="https://github.com/coreui/coreui-icons/issues/new?template=bug_report.md">Report bug</a> · <a href="https://github.com/coreui/coreui-icons/issues/new?template=feature_request.md">Request feature</a> · <a href="https://blog.coreui.io/">Blog</a> </p>

Status

npm package NPM downloads react

Installation

npm install @coreui/icons
npm install @coreui/icons-react

or

yarn add @coreui/icons
yarn add @coreui/icons-react

Use

Single icon

import { CIcon } from '@coreui/icons-react';
import { cifAU } from '@coreui/icons';

...
render() {
  return (
    <CIcon icon={cilList} size="xxl"/>
  )
}
...

All icons

import { CIcon } from '@coreui/icons-react';
import * as icon from '@coreui/icons';

...
render() {
  return (
    <CIcon icon={icon.cilList} size="xxl"/>
  )
}
...

API

propertytypedescription
classNamestringA string of all className you want applied to the component.
customClassNamestring | object | string[]Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.
iconstring | string[]Name of the icon placed in React object or SVG content.
heightnumberThe height attribute defines the vertical length of an icon.
sizesm | md |lg | xl | xxl | 3xl | 4xl | 5xl | 6xl | 7xl | 8xl | 9xlSize of the icon.
usestringIf defined component will be rendered using use tag.
titlestringTitle tag content.
widthnumberThe width attribute defines the horizontal length of an icon.