Vue Icon Component

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

// CoreUI Icons library
npm install @coreui/icons

// CIcon component
npm install @coreui/icons-vue 

Yarn

yarn add @coreui/icons
yarn add @coreui/icons-vue

Usage

Single icon

undefinedundefined
<template>
  <CIcon :icon="cilList" size="xl"/>
  <CIcon :icon="cilShieldAlt" size="xl"/>
</template>
<script>
import { CIcon } from '@coreui/icons-vue';
import { cilList, cilShieldAlt } from '@coreui/icons';
export default {
  components: {
    CIcon
  },
  setup() {
    return {
      cilList,
      cilShieldAlt,
    }
  }
}
</script>

All icons

<template>
  <CIcon :icon="icon.cilList" size="xxl"/>
</template>
<script>
import { CIcon } from '@coreui/icons-vue';
import * as icon from '@coreui/icons';
export default {
  components: {
    CIcon
  },
  setup() {
    return {
      icon,
    }
  }
}
</script>

Icons object

This way you import your needed icons once and pass them to $root object on 'icons' key

// main.js / main.ts
import { CIcon } from '@coreui/icons-vue';
import {
  cilArrowBottom,
  cilArrowRight,
  cilArrowTop,
  cilBan,
  cilBasket,
  cilBell,
  cilCalculator,
  cilCalendar
} from '@coreui/icons'

const icons = {
  cilArrowBottom,
  cilArrowRight,
  cilArrowTop,
  cilBan,
  cilBasket,
  cilBell,
  cilCalculator,
  cilCalendar
}

const app = createApp(App)
...
app.provide('icons', icons)
app.component('CIcon', CIcon)
...
app.mount('#app')

Later anywhere in the app:

<CIcon icon="cilArrowBottom" size="xxl"/>
<CIcon icon="cil-arrow-bottom" size="xxl"/>

You can pass the name of the icon both in camelCase and kebab-case

Available icons

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

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

API

CIcon

import { CIcon } from '@coreui/icons-vue'
Prop nameDescriptionTypeValuesDefault
contentUse :icon="..." instead of
@deprecated since version 3.0
string|array--
custom-class-nameUse for replacing default CIcon component classes. Prop is overriding the 'size' prop.string|array|object--
iconName of the icon placed in Vue object or SVG content.string | string[]--
nameUse icon="..." instead of
@deprecated since version 3.0
string--
sizeSize of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.string--
titleTitle tag content.string--
useIf defined component will be rendered using 'use' tag.string--