Icons
A collection of vector icons available in font format. The respective CSS class is listed below each icon.
UI icons
ci-activity
ci-airplay
ci-alert-circle
ci-alert-octagon
ci-alert-triangle
ci-align-center
ci-align-justify
ci-align-left
ci-align-right
ci-anchor
ci-aperture
ci-archive
ci-arrow-down-circle
ci-arrow-down-left
ci-arrow-down-right
ci-arrow-down
ci-arrow-left-circle
ci-arrow-left
ci-arrow-right-circle
ci-arrow-right
ci-arrow-up-circle
ci-arrow-up-left
ci-arrow-up-right
ci-arrow-up
ci-at-sign
ci-autocontrast
ci-avocado
ci-award
ci-bannedforbidden
ci-bar-chart
ci-battery
ci-battery-charging
ci-battery-2
ci-bellnotification
ci-bell-offnotification
ci-bluetooth
ci-bold
ci-book
ci-book-open
ci-bookmark
ci-box
ci-briefcase
ci-broccoli
ci-bulletdot
ci-calendardate
ci-camera
ci-camera-off
ci-camera-2
ci-cast
ci-chat
ci-check
ci-check-circle
ci-check-search
ci-check-shield
ci-check-square
ci-chevron-down
ci-chevron-left
ci-chevron-right
ci-chevron-up
ci-chevrons-down
ci-chevrons-left
ci-chevrons-right
ci-chevrons-up
ci-click
ci-clipboard
ci-clocktime
ci-close
ci-close-circle
ci-close-octagon
ci-close-square
ci-cloud
ci-cloud-off
ci-cloud-drizzle
ci-cloud-lightning
ci-cloud-rain
ci-cloud-snow
ci-code
ci-coffee
ci-columns
ci-command
ci-compass
ci-computerlaptop
ci-copy
ci-corner-down-leftarrow
ci-corner-down-rightarrow
ci-corner-left-downarrow
ci-corner-left-uparrow
ci-corner-right-downarrow
ci-corner-right-uparrow
ci-corner-up-leftarrow
ci-corner-up-rightarrow
ci-credit-card
ci-crop
ci-crosshairaim
ci-database
ci-deletebackspace
ci-deliverytruckcar
ci-delivery-2truckcar
ci-disc
ci-divide
ci-dollar-sign
ci-download
ci-download-cloud
ci-droplet
ci-edit
ci-edit-2
ci-edit-3
ci-external-link
ci-eye
ci-eye-off
ci-fast-forward
ci-feather
ci-file
ci-file-minus
ci-file-plus
ci-file-text
ci-film
ci-filter
ci-flag
ci-folder
ci-folder-minus
ci-folder-plus
ci-foodmealcook
ci-frownemojisad
ci-game
ci-gift
ci-globe
ci-gluten-free
ci-grid
ci-grid-2
ci-hanger
ci-hard-drive
ci-hard-drive-2
ci-hash
ci-headphones
ci-headphones-2
ci-heart
ci-heart-filled
ci-help-circle
ci-home
ci-id-cardpassport
ci-imagepicturephoto
ci-inbox
ci-info
ci-italic
ci-key
ci-layers
ci-layers-2
ci-layout
ci-leafecosustainableplant
ci-life-buoysupport
ci-link
ci-link-2
ci-list
ci-loader
ci-lock
ci-log-inloginsignin
ci-log-outlogoutsignout
ci-mailenvelopeemail
ci-map
ci-map-pinlocation
ci-maximizeexpandfullscreen
ci-maximize-2expandfullscreen
ci-mehemoji
ci-menu
ci-message-circle
ci-message-square
ci-mic
ci-mic-off
ci-minimizecollapse
ci-minimize-2collapse
ci-minus
ci-minus-circle
ci-minus-square
ci-monitor
ci-monitor-2
ci-moon
ci-more-horizontal
ci-more-vertical
ci-mouse-pointer
ci-move
ci-music
ci-navigation
ci-navigation-2
ci-package
ci-paintcolorfillbucket
ci-paperclip
ci-pause
ci-pause-circle
ci-pen-tool
ci-percent
ci-phone
ci-phone-call
ci-phone-forwarded
ci-phone-incoming
ci-phone-missed
ci-phone-off
ci-phone-outgoing
ci-pie-chart
ci-play
ci-play-circle
ci-play-filled
ci-plus
ci-plus-circle
ci-plus-square
ci-power
ci-powerbank
ci-printer
ci-printer-2
ci-radiosignal
ci-refresh-ccw
ci-refresh-cw
ci-rewind
ci-rocket
ci-rotate-ccw
ci-rotate-cw
ci-rss
ci-rulersize
ci-save
ci-scan
ci-schedulecalendartimedate
ci-scissors
ci-search
ci-send
ci-server
ci-settingscog
ci-share
ci-share-2
ci-shield
ci-shield-off
ci-shopping-bag
ci-shopping-cart
ci-shuffle
ci-sidebar
ci-skip-back
ci-skip-forward
ci-sliderssettings
ci-smartphone
ci-smartphone-2
ci-smileemojihappy
ci-sort
ci-speaker
ci-speaker-2
ci-star
ci-star-half
ci-star-filled
ci-stop-circle
ci-sun
ci-sunrise
ci-sunset
ci-table
ci-tablet
ci-tag
ci-target
ci-terminal
ci-thermometer
ci-thumbs-downdislike
ci-thumbs-uplike
ci-ticketcouponvoucher
ci-toolwrench
ci-trash
ci-trash-empty
ci-trending-down
ci-trending-up
ci-triangle
ci-truckdelivery
ci-tv
ci-type
ci-umbrella
ci-unlock
ci-upload
ci-upload-cloud
ci-user
ci-user-check
ci-user-plus
ci-user-x
ci-video
ci-video-off
ci-voicemail
ci-volume
ci-volume-1
ci-volume-2
ci-volume-x
ci-watchtime
ci-watch-2time
ci-wifi
ci-wifi-off
ci-wind
ci-zap
ci-zap-off
ci-zoom-in
ci-zoom-out
Brand icons
ci-airbnb
ci-apple
ci-behance
ci-blogger
ci-codepen
ci-discord
ci-disqus
ci-dribbble
ci-dropbox
ci-envato
ci-evernote
ci-facebook
ci-flickr
ci-foursquare
ci-github
ci-google
ci-google-drive
ci-google-play
ci-hangouts
ci-instagram
ci-kickstarter
ci-linkedin
ci-medium
ci-messenger
ci-myspace
ci-odnoklassniki
ci-open-source
ci-patreon
ci-pinterest
ci-product-hunt
ci-quora
ci-reddit
ci-rss-2
ci-skype
ci-slack
ci-snapchat
ci-soundcloud
ci-spotify
ci-stack-overflow
ci-steam
ci-stumbleupon
ci-telegram
ci-tiktok
ci-tinder
ci-trello
ci-tumblr
ci-twitch
ci-viber
ci-vimeo
ci-vk
ci-wechat
ci-whatsapp
ci-xtwitter
ci-xing
ci-yelp
ci-youtube
Animate on hover
import Button from 'react-bootstrap/Button'
export default function IconsAnimationDemo() {
return (
<div className="d-flex flex-wrap gap-4">
{[
{ icon: 'bell', animation: 'shake' },
{ icon: 'heart', animation: 'pulse' },
{ icon: 'refresh-cw', animation: 'rotate' },
{ icon: 'search', animation: 'scale' },
{ icon: 'arrow-up', animation: 'slide-up' },
{ icon: 'arrow-right', animation: 'slide-end' },
{ icon: 'arrow-down', animation: 'slide-down' },
{ icon: 'arrow-left', animation: 'slide-start' },
].map(({ icon, animation }) => (
<Button key={icon} variant="icon" size="lg" className={`border animate-${animation} fs-xl`}>
<i className={`ci-${icon} animate-target`}/>
</Button>
))}
</div>
)
}Icon with text
24/7 Customer Support
Friendly customer support
Eco-friendly
Decorate your space with eco-friendly furniture with low VOCs, environmentally friendly materials and safe coatings.
Gluten-Free
Foods that don't contain gluten
export default function IconsWithTextDemo() {
return (
<div className="d-flex align-items-center">
<div className="d-flex bg-body-tertiary text-dark-emphasis rounded-circle p-4">
<i className="ci-chat fs-2 m-1"/>
</div>
<div className="ps-3">
<h3 className="h6 mb-1">24/7 Customer Support</h3>
<p className="fs-sm mb-0">Friendly customer support</p>
</div>
</div>
<div className="text-center">
<div className="text-dark-emphasis mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor">
<path d="M62.189 9.902c0-.604-.604-1.208-1.208-1.208h-6.158-3.14l-1.691.121-1.57.242c-2.174.483-4.226 1.087-6.159 2.174s-3.623 2.294-5.072 3.864h-.121c-3.14 3.019-5.313 7.004-6.038 11.351l-.241 1.57-.121 1.691v3.14 5.796c-.604.845-1.087 1.691-1.57 2.536.121-1.328.121-2.536.242-3.864 0-.966.121-1.811.121-2.777v-1.449l-.121-1.449c-.242-1.811-.845-3.743-1.691-5.434a20.6 20.6 0 0 0-3.26-4.71c-2.657-2.777-6.279-4.709-10.143-5.434l-1.449-.242-1.449-.121H8.574 3.019c-.604 0-1.208.604-1.208 1.208v5.555 2.777l.121 1.449.242 1.449C2.898 32 4.83 35.502 7.728 38.159c1.449 1.328 3.019 2.415 4.709 3.26s3.623 1.328 5.434 1.691l1.449.121h1.449c.966 0 1.811-.121 2.777-.121 1.57-.121 3.14-.121 4.709-.242-.362.604-.604 1.328-.966 1.932-1.449 3.381-2.294 7.004-2.294 10.506.966-3.502 2.294-6.642 3.985-9.66.966-1.811 2.174-3.623 3.381-5.313h5.676 3.14l1.691-.121 1.57-.242c2.174-.483 4.226-1.087 6.159-2.174s3.623-2.294 5.072-3.864h.121c3.14-3.019 5.313-7.004 6.038-11.351l.242-1.57.121-1.69v-3.14-6.279zM49.63 35.743c-1.69.966-3.623 1.449-5.555 1.811l-1.449.242-1.449.121h-3.019-3.864c.242-.242.483-.604.724-.845 2.174-2.657 4.589-5.192 7.004-7.728l7.366-7.728c-3.019 1.932-5.917 3.985-8.694 6.279-2.657 2.294-5.192 4.709-7.487 7.487v-2.536-3.019l.121-1.449.242-1.449c.362-1.932.845-3.864 1.811-5.555.845-1.691 2.053-3.381 3.381-4.83 1.449-1.328 3.019-2.415 4.709-3.381s3.623-1.449 5.555-1.811l1.449-.241 1.449-.121h3.019 4.951v4.951 3.019l-.121 1.57-.242 1.449c-.362 1.932-.845 3.864-1.811 5.555-.845 1.691-2.053 3.381-3.381 4.83a17.86 17.86 0 0 1-4.709 3.381zm-26.083 6.762c-.966 0-1.811-.121-2.777-.121l-1.328-.121-1.328-.242c-3.502-.724-6.641-2.536-9.057-5.072-1.208-1.328-2.174-2.657-3.019-4.226-.725-1.57-1.208-3.26-1.57-4.951l-.242-1.328-.121-1.328V22.34v-4.347h4.347 2.777 1.328l1.328.121c1.691.242 3.381.725 4.951 1.57 1.449 1.087 2.898 2.053 4.106 3.26 2.536 2.415 4.347 5.555 5.072 9.057l.241 1.328.121 1.328c.121.845.121 1.811.121 2.777.121 1.449.121 2.777.241 4.226-.241.483-.483.845-.724 1.328-1.328-.362-2.898-.362-4.468-.483zm-5.434-12.437c-1.449-.966-2.898-1.932-4.589-2.657.966 1.449 2.174 2.777 3.381 3.985 2.415 2.536 4.83 4.709 7.487 7.124 1.328 1.087 2.536 2.294 4.106 3.381-.725-1.691-1.57-3.26-2.657-4.589-2.174-2.898-4.709-5.193-7.728-7.245z" />
</svg>
</div>
<h3 className="h5 mb-3">Eco-friendly</h3>
<p className="fs-sm mb-0">
Decorate your space with eco-friendly furniture with low VOCs, environmentally friendly materials and safe
coatings.
</p>
</div>
<div className="text-center">
<div className="d-inline-block text-dark-emphasis bg-warning-subtle rounded-circle p-5 mb-4">
<svg
className="m-2"
xmlns="http://www.w3.org/2000/svg"
width="76"
height="76"
viewBox="0 0 76 76"
fill="none"
>
<path
d="M62.631 13.369l-7.214 7.214M20.583 55.417l-7.214 7.214M38 51.037c0-11.315-13.926-11.315-13.926-11.315s0 13.926 11.315 13.926H38m0-2.611v2.611m0-2.611c0-11.315 13.926-11.315 13.926-11.315s0 13.926-11.315 13.926H38m0-14.222c0-11.315-13.926-11.315-13.926-11.315s0 13.926 11.315 13.926H38m0-2.611v2.611m0-2.611c0-11.315 13.926-11.315 13.926-11.315s0 13.926-11.315 13.926H38m0 18.585v-6.967M72.833 38c0 19.238-15.595 34.833-34.833 34.833S3.167 57.238 3.167 38 18.762 3.167 38 3.167 72.833 18.762 72.833 38zM38 15.378s9.847 9.849 1.846 17.849L38 35.074l-1.846-1.847C28.153 25.227 38 15.378 38 15.378z"
stroke="currentColor"
strokeWidth="2.5"
strokeMiterlimit="10"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
<h3 className="h5 mb-2">Gluten-Free</h3>
<p className="fs-sm mb-0">Foods that don't contain gluten</p>
</div>
)
}