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 Icons Component

React icons is a great resource for React developers, who can use its customizable SVG icons in their applications. It offers an extensive library of icons to choose from, which can be easily inserted into projects with just a few lines of code. Not only that, but users are also able to customize the appearance of these icons by setting various props on them. This provides developers with an efficient and flexible way to integrate useful graphical elements into their webpages without doing any extra work.

Installation#

To use React icons in your project, you will need to install it as a dependency:

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...

All icons#

1import CIcon from '@coreui/icons-react';
2import * as icon from '@coreui/icons';
3
4...
5render() {
6 return (
7 <CIcon icon={icon.cilList} size="xxl"/>
8 )
9}
10...

Available react icons#

CoreUI React Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app.

cilAccountLogout
cilActionRedo
cilActionUndo
cilAddressBook
cilAirplaneModeOff
cilAirplaneMode
cilAirplay
cilAlarm
cilAlbum
cilAlignCenter
cilAlignLeft
cilAlignRight
cilAmericanFootball
cilAnimal
cilAperture
cilApple
cilApplicationsSettings
cilApplications
cilAppsSettings
cilApps
cilArrowBottom
cilArrowCircleBottom
cilArrowCircleLeft
cilArrowCircleRight
cilArrowCircleTop
cilArrowLeft
cilArrowRight
cilArrowThickBottom
cilArrowThickFromBottom
cilArrowThickFromLeft
cilArrowThickFromRight
cilArrowThickFromTop
cilArrowThickLeft
cilArrowThickRight
cilArrowThickToBottom
cilArrowThickToLeft
cilArrowThickToRight
cilArrowThickToTop
cilArrowThickTop
cilArrowTop
cilAssistiveListeningSystem
cilAsteriskCircle
cilAsterisk
cilAt
cilAudioDescription
cilAudioSpectrum
cilAudio
cilAvTimer
cilBabyCarriage
cilBaby
cilBackspace
cilBadge
cilBalanceScale
cilBan
cilBank
cilBarChart
cilBarcode
cilBaseball
cilBasket
cilBasketball
cilBath
cilBathroom
cilBattery0
cilBattery3
cilBattery5
cilBatteryAlert
cilBatteryEmpty
cilBatteryFull
cilBatterySlash
cilBeachAccess
cilBeaker
cilBed
cilBellExclamation
cilBell
cilBike
cilBirthdayCake
cilBlind
cilBluetooth
cilBlurCircular
cilBlurLinear
cilBlur
cilBoatAlt
cilBold
cilBoltCircle
cilBolt
cilBook
cilBookmark
cilBorderAll
cilBorderBottom
cilBorderClear
cilBorderHorizontal
cilBorderInner
cilBorderLeft
cilBorderOuter
cilBorderRight
cilBorderStyle
cilBorderTop
cilBorderVertical
cilBowling
cilBraille
cilBriefcase
cilBrightness
cilBritishPound
cilBrowser
cilBrushAlt
cilBrush
cilBug
cilBuilding
cilBullhorn
cilBurger
cilBurn
cilBusAlt
cilCalculator
cilCalendarCheck
cilCalendar
cilCameraControl
cilCameraRoll
cilCamera
cilCarAlt
cilCaretBottom
cilCaretLeft
cilCaretRight
cilCaretTop
cilCart
cilCash
cilCasino
cilCast
cilCat
cilCc
cilCenterFocus
cilChartLine
cilChartPie
cilChart
cilChatBubble
cilCheckAlt
cilCheckCircle
cilCheck
cilChevronBottom
cilChevronCircleDownAlt
cilChevronCircleLeftAlt
cilChevronCircleRightAlt
cilChevronCircleUpAlt
cilChevronDoubleDown
cilChevronDoubleLeft
cilChevronDoubleRight
cilChevronDoubleUp
cilChevronLeft
cilChevronRight
cilChevronTop
cilChildFriendly
cilChild
cilCircle
cilClearAll
cilClipboard
cilClock
cilClone
cilClosedCaptioning
cilCloudDownload
cilCloudUpload
cilCloud
cilCloudy
cilCode
cilCoffee
cilCog
cilColorBorder
cilColorFill
cilColorPalette
cilColumns
cilCommand
cilCommentBubble
cilCommentSquare
cilCompass
cilCompress
cilContact
cilContrast
cilControl
cilCopy
cilCouch
cilCreditCard
cilCropRotate
cilCrop
cilCursorMove
cilCursor
cilCut
cilDataTransferDown
cilDataTransferUp
cilDeaf
cilDelete
cilDescription
cilDevices
cilDialpad
cilDiamond
cilDinner
cilDisabled
cilDog
cilDollar
cilDoor
cilDoubleQuoteSansLeft
cilDoubleQuoteSansRight
cilDrinkAlcohol
cilDrink
cilDrop
cilEco
cilEducation
cilElevator
cilEnvelopeClosed
cilEnvelopeLetter
cilEnvelopeOpen
cilEqualizer
cilEthernet
cilEuro
cilExcerpt
cilExitToApp
cilExpandDown
cilExpandLeft
cilExpandRight
cilExpandUp
cilExposure
cilExternalLink
cilEyedropper
cilFaceDead
cilFace
cilFactorySlash
cilFactory
cilFastfood
cilFax
cilFeaturedPlaylist
cilFile
cilFilterFrames
cilFilterPhoto
cilFilterSquare
cilFilterX
cilFilter
cilFindInPage
cilFingerprint
cilFire
cilFlagAlt
cilFlightTakeoff
cilFlipToBack
cilFlipToFront
cilFlip
cilFlower
cilFolderOpen
cilFolder
cilFont
cilFootball
cilFork
cilFridge
cilFrown
cilFullscreenExit
cilFullscreen
cilFunctionsAlt
cilFunctions
cilGamepad
cilGarage
cilGem
cilGif
cilGift
cilGlobeAlt
cilGolfAlt
cilGolf
cilGradient
cilGrain
cilGraph
cilGridSlash
cilGrid
cilGroup
cilHamburgerMenu
cilHandPointDown
cilHandPointLeft
cilHandPointRight
cilHandPointUp
cilHappy
cilHd
cilHdr
cilHeader
cilHeadphones
cilHealing
cilHeart
cilHighlighter
cilHighligt
cilHistory
cilHome
cilHospital
cilHotTub
cilHouse
cilHttps
cilImageBroken
cilImagePlus
cilImage
cilInbox
cilIndentDecrease
cilIndentIncrease
cilIndustrySlash
cilIndustry
cilInfinity
cilInfo
cilInputHdmi
cilInputPower
cilInput
cilInstitution
cilItalic
cilJustifyCenter
cilJustifyLeft
cilJustifyRight
cilKeyboard
cilLan
cilLanguage
cilLaptop
cilLayers
cilLeaf
cilLemon
cilLevelDown
cilLevelUp
cilLibraryAdd
cilLibraryBuilding
cilLibrary
cilLifeRing
cilLightbulb
cilLineSpacing
cilLineStyle
cilLineWeight
cilLinkAlt
cilLinkBroken
cilLink
cilListFilter
cilListHighPriority
cilListLowPriority
cilListNumberedRtl
cilListNumbered
cilListRich
cilList
cilLocationPin
cilLockLocked
cilLockUnlocked
cilLocomotive
cilLoop1
cilLoopCircular
cilLoop
cilLowVision
cilMagnifyingGlass
cilMap
cilMediaEject
cilMediaPause
cilMediaPlay
cilMediaRecord
cilMediaSkipBackward
cilMediaSkipForward
cilMediaStepBackward
cilMediaStepForward
cilMediaStop
cilMedicalCross
cilMeh
cilMemory
cilMenu
cilMic
cilMicrophone
cilMinus
cilMobileLandscape
cilMobile
cilMoney
cilMonitor
cilMoodBad
cilMoodGood
cilMoodVeryBad
cilMoodVeryGood
cilMoon
cilMouse
cilMouthSlash
cilMove
cilMovie
cilMugTea
cilMug
cilMusicNote
cilNewspaper
cilNoteAdd
cilNotes
cilObjectGroup
cilObjectUngroup
cilOpacity
cilOpentype
cilOptions
cilPaintBucket
cilPaint
cilPaperPlane
cilPaperclip
cilParagraph
cilPaw
cilPenAlt
cilPenNib
cilPen
cilPencil
cilPeople
cilPhone
cilPin
cilPizza
cilPlant
cilPlaylistAdd
cilPlus
cilPool
cilPowerStandby
cilPregnant
cilPrint
cilPushchair
cilPuzzle
cilQrCode
cilRain
cilRectangle
cilRecycle
cilReload
cilReportSlash
cilResizeBoth
cilResizeHeight
cilResizeWidth
cilRestaurant
cilRoom
cilRouter
cilRowing
cilRss
cilRuble
cilRunning
cilSad
cilSatelite
cilSave
cilSchool
cilScreenDesktop
cilScreenSmartphone
cilScrubber
cilSearch
cilSend
cilSettings
cilShareAll
cilShareAlt
cilShareBoxed
cilShare
cilShieldAlt
cilShortText
cilShower
cilSignLanguage
cilSignalCellular0
cilSignalCellular3
cilSignalCellular4
cilSim
cilSitemap
cilSmilePlus
cilSmile
cilSmokeFree
cilSmokeSlash
cilSmoke
cilSmokingRoom
cilSnowflake
cilSoccer
cilSofa
cilSortAlphaDown
cilSortAlphaUp
cilSortAscending
cilSortDescending
cilSortNumericDown
cilSortNumericUp
cilSpa
cilSpaceBar
cilSpeak
cilSpeaker
cilSpeech
cilSpeedometer
cilSpreadsheet
cilSquare
cilStarHalf
cilStar
cilStorage
cilStream
cilStrikethrough
cilSun
cilSwapHorizontal
cilSwapVertical
cilSwimming
cilSync
cilTablet
cilTag
cilTags
cilTask
cilTaxi
cilTennisBall
cilTennis
cilTerminal
cilTerrain
cilTextShapes
cilTextSize
cilTextSquare
cilTextStrike
cilText
cilThumbDown
cilThumbUp
cilToggleOff
cilToggleOn
cilToilet
cilTouchApp
cilTransfer
cilTranslate
cilTrash
cilTriangle
cilTruck
cilTv
cilUnderline
cilUsb
cilUserFemale
cilUserFollow
cilUserPlus
cilUserUnfollow
cilUserX
cilUser
cilVector
cilVerticalAlignBottom
cilVerticalAlignCenter
cilVerticalAlignTop
cilVideo
cilVideogame
cilViewColumn
cilViewModule
cilViewQuilt
cilViewStream
cilVoiceOverRecord
cilVoice
cilVolumeHigh
cilVolumeLow
cilVolumeOff
cilWalk
cilWallet
cilWallpaper
cilWarning
cilWatch
cilWc
cilWeightlifitng
cilWheelchair
cilWifiSignal0
cilWifiSignal1
cilWifiSignal2
cilWifiSignal3
cilWifiSignal4
cilWifiSignalOff
cilWindowMaximize
cilWindowMinimize
cilWindowRestore
cilWindow
cilWrapText
cilXCircle
cilX
cilYen
cilZoomIn
cilZoomOut
cilZoom

React Icons also provides a variety of customization options, such as the ability to change the size, color, and style of the icons, as well as the ability to add additional CSS classes to the icons. You can find more information on these customization options in the documentation.

API#

CIcon#

1import { CIcon } from '@coreui/icons-react'
2// or
3import CIcon from '@coreui/icons-react/src/CIcon'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-
content
Deprecated 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 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-