Icons
A collection of vector icons available in font format. The respective CSS class is listed below each icon.
UI icons
fi-activity
<i class="fi-activity"></i>fi-airplay
<i class="fi-airplay"></i>fi-alert-circle
<i class="fi-alert-circle"></i>fi-alert-octagon
<i class="fi-alert-octagon"></i>fi-alert-triangle
<i class="fi-alert-triangle"></i>fi-align-center
<i class="fi-align-center"></i>fi-align-justify
<i class="fi-align-justify"></i>fi-align-left
<i class="fi-align-left"></i>fi-align-right
<i class="fi-align-right"></i>fi-anchor
<i class="fi-anchor"></i>fi-aperture
<i class="fi-aperture"></i>fi-archive
<i class="fi-archive"></i>fi-armchair
<i class="fi-armchair"></i>fi-arrow-down-circle
<i class="fi-arrow-down-circle"></i>fi-arrow-down-left
<i class="fi-arrow-down-left"></i>fi-arrow-down-right
<i class="fi-arrow-down-right"></i>fi-arrow-down
<i class="fi-arrow-down"></i>fi-arrow-left-circle
<i class="fi-arrow-left-circle"></i>fi-arrow-left
<i class="fi-arrow-left"></i>fi-arrow-right-circle
<i class="fi-arrow-right-circle"></i>fi-arrow-right
<i class="fi-arrow-right"></i>fi-arrow-up-circle
<i class="fi-arrow-up-circle"></i>fi-arrow-up-left
<i class="fi-arrow-up-left"></i>fi-arrow-up-right
<i class="fi-arrow-up-right"></i>fi-arrow-up
<i class="fi-arrow-up"></i>fi-at-sign
<i class="fi-at-sign"></i>fi-autocontrast
<i class="fi-auto"></i>fi-avocado
<i class="fi-avocado"></i>fi-award
<i class="fi-award"></i>fi-babykids children
<i class="fi-baby"></i>fi-bannedforbidden
<i class="fi-banned"></i>fi-bar-chart
<i class="fi-bar-chart"></i>fi-bar-chart-2
<i class="fi-bar-chart-2"></i>fi-battery
<i class="fi-battery"></i>fi-battery-charging
<i class="fi-battery-charging"></i>fi-battery-2
<i class="fi-battery-2"></i>fi-bednotification
<i class="fi-bed"></i>fi-bed-doublenotification
<i class="fi-bed-double"></i>fi-bed-singlenotification
<i class="fi-bed-single"></i>fi-bellnotification
<i class="fi-bell"></i>fi-bell-offnotification
<i class="fi-bell-off"></i>fi-bicycle
<i class="fi-bicycle"></i>fi-bluetooth
<i class="fi-bluetooth"></i>fi-bold
<i class="fi-bold"></i>fi-book
<i class="fi-book"></i>fi-book-open
<i class="fi-book-open"></i>fi-bookmark
<i class="fi-bookmark"></i>fi-bookmark-filled
<i class="fi-bookmark-filled"></i>fi-bowl-food
<i class="fi-bowl-food"></i>fi-box
<i class="fi-box"></i>fi-briefcase
<i class="fi-briefcase"></i>fi-bulletdot
<i class="fi-bullet"></i>fi-calendardate
<i class="fi-calendar"></i>fi-camera
<i class="fi-camera"></i>fi-camera-off
<i class="fi-camera-off"></i>fi-car
<i class="fi-car"></i>fi-car-garage
<i class="fi-car-garage"></i>fi-case-medicinedoctor healthcare
<i class="fi-case-medicine"></i>fi-cast
<i class="fi-cast"></i>fi-cctvcamera surveillance
<i class="fi-cctv"></i>fi-chat
<i class="fi-chat"></i>fi-check
<i class="fi-check"></i>fi-check-circle
<i class="fi-check-circle"></i>fi-check-shield
<i class="fi-check-shield"></i>fi-check-square
<i class="fi-check-square"></i>fi-chevron-down
<i class="fi-chevron-down"></i>fi-chevron-left
<i class="fi-chevron-left"></i>fi-chevron-right
<i class="fi-chevron-right"></i>fi-chevron-up
<i class="fi-chevron-up"></i>fi-chevrons-down
<i class="fi-chevrons-down"></i>fi-chevrons-left
<i class="fi-chevrons-left"></i>fi-chevrons-right
<i class="fi-chevrons-right"></i>fi-clipboard
<i class="fi-clipboard"></i>fi-clocktime
<i class="fi-clock"></i>fi-closex
<i class="fi-close"></i>fi-close-circlex
<i class="fi-close-circle"></i>fi-close-octagonx
<i class="fi-close-octagon"></i>fi-close-squarex
<i class="fi-close-square"></i>fi-cloud
<i class="fi-cloud"></i>fi-cloud-off
<i class="fi-cloud-off"></i>fi-cloud-drizzle
<i class="fi-cloud-drizzle"></i>fi-cloud-lightning
<i class="fi-cloud-lightning"></i>fi-cloud-rain
<i class="fi-cloud-rain"></i>fi-cloud-snow
<i class="fi-cloud-snow"></i>fi-code
<i class="fi-code"></i>fi-coffeemug cup
<i class="fi-coffee"></i>fi-coffee-2mug cup
<i class="fi-coffee-2"></i>fi-columns
<i class="fi-columns"></i>fi-command
<i class="fi-command"></i>fi-compass
<i class="fi-compass"></i>fi-computerlaptop
<i class="fi-computer"></i>fi-copy
<i class="fi-copy"></i>fi-corner-down-leftarrow
<i class="fi-corner-down-left"></i>fi-corner-down-rightarrow
<i class="fi-corner-down-right"></i>fi-corner-left-downarrow
<i class="fi-corner-left-down"></i>fi-corner-left-uparrow
<i class="fi-corner-left-up"></i>fi-corner-right-downarrow
<i class="fi-corner-right-down"></i>fi-corner-right-uparrow
<i class="fi-corner-right-up"></i>fi-corner-up-leftarrow
<i class="fi-corner-up-left"></i>fi-corner-up-rightarrow
<i class="fi-corner-up-right"></i>fi-credit-card
<i class="fi-credit-card"></i>fi-crop
<i class="fi-crop"></i>fi-crosshairaim
<i class="fi-crosshair"></i>fi-database
<i class="fi-database"></i>fi-deletebackspace
<i class="fi-delete"></i>fi-deliverytruck car
<i class="fi-delivery"></i>fi-delivery-2truck car
<i class="fi-delivery-2"></i>fi-disc
<i class="fi-disc"></i>fi-dishwasher
<i class="fi-dishwasher"></i>fi-divide
<i class="fi-divide"></i>fi-document-search
<i class="fi-document-search"></i>fi-dollar-sign
<i class="fi-dollar-sign"></i>fi-download
<i class="fi-download"></i>fi-download-cloud
<i class="fi-download-cloud"></i>fi-dressercloset cabinet locker cupboard
<i class="fi-dresser"></i>fi-droplet
<i class="fi-droplet"></i>fi-edit
<i class="fi-edit"></i>fi-edit-2
<i class="fi-edit-2"></i>fi-edit-3
<i class="fi-edit-3"></i>fi-external-link
<i class="fi-external-link"></i>fi-eye
<i class="fi-eye"></i>fi-eye-off
<i class="fi-eye-off"></i>fi-fast-forward
<i class="fi-fast-forward"></i>fi-feather
<i class="fi-feather"></i>fi-file
<i class="fi-file"></i>fi-file-minus
<i class="fi-file-minus"></i>fi-file-plus
<i class="fi-file-plus"></i>fi-file-text
<i class="fi-file-text"></i>fi-film
<i class="fi-film"></i>fi-filter
<i class="fi-filter"></i>fi-flag
<i class="fi-flag"></i>fi-folder
<i class="fi-folder"></i>fi-folder-minus
<i class="fi-folder-minus"></i>fi-folder-plus
<i class="fi-folder-plus"></i>fi-foodmeal cook
<i class="fi-food"></i>fi-footprints
<i class="fi-footprints"></i>fi-fork-knife
<i class="fi-fork-knife"></i>fi-frownemoji sad
<i class="fi-frown"></i>fi-game
<i class="fi-game"></i>fi-garage
<i class="fi-garage"></i>fi-gas-pump
<i class="fi-gas-pump"></i>fi-gearbox
<i class="fi-gearbox"></i>fi-gift
<i class="fi-gift"></i>fi-globe
<i class="fi-globe"></i>fi-gluten-free
<i class="fi-gluten-free"></i>fi-graduation-capstudent university
<i class="fi-graduation-cap"></i>fi-grid
<i class="fi-grid"></i>fi-hangerhanger
<i class="fi-hanger"></i>fi-hard-drive
<i class="fi-hard-drive"></i>fi-hash
<i class="fi-hash"></i>fi-headphones
<i class="fi-headphones"></i>fi-heart
<i class="fi-heart"></i>fi-heart-filled
<i class="fi-heart-filled"></i>fi-help-circle
<i class="fi-help-circle"></i>fi-home
<i class="fi-home"></i>fi-id-cardpassport
<i class="fi-id-card"></i>fi-imagepicture photo
<i class="fi-image"></i>fi-inbox
<i class="fi-inbox"></i>fi-info
<i class="fi-info"></i>fi-iron
<i class="fi-iron"></i>fi-italic
<i class="fi-italic"></i>fi-key
<i class="fi-key"></i>fi-lamp-pendant
<i class="fi-lamp-pendant"></i>fi-layers
<i class="fi-layers"></i>fi-layout
<i class="fi-layout"></i>fi-leafeco sustainable plant
<i class="fi-leaf"></i>fi-life-buoysupport
<i class="fi-life-buoy"></i>fi-lightbulb
<i class="fi-lightbulb"></i>fi-link
<i class="fi-link"></i>fi-link-2
<i class="fi-link-2"></i>fi-list
<i class="fi-list"></i>fi-loader
<i class="fi-loader"></i>fi-lock
<i class="fi-lock"></i>fi-log-inlogin signin
<i class="fi-log-in"></i>fi-log-outlogout signout
<i class="fi-log-out"></i>fi-mailenvelope email
<i class="fi-mail"></i>fi-map
<i class="fi-map"></i>fi-map-pinlocation
<i class="fi-map-pin"></i>fi-map-pin-filledlocation
<i class="fi-map-pin-filled"></i>fi-maximizeexpand fullscreen
<i class="fi-maximize"></i>fi-maximize-2expand fullscreen
<i class="fi-maximize-2"></i>fi-mehemoji
<i class="fi-meh"></i>fi-menu
<i class="fi-menu"></i>fi-message-circle
<i class="fi-message-circle"></i>fi-message-square
<i class="fi-message-square"></i>fi-mic
<i class="fi-mic"></i>fi-mic-off
<i class="fi-mic-off"></i>fi-minimizecollapse
<i class="fi-minimize"></i>fi-minimize-2collapse
<i class="fi-minimize-2"></i>fi-minus
<i class="fi-minus"></i>fi-minus-circle
<i class="fi-minus-circle"></i>fi-minus-square
<i class="fi-minus-square"></i>fi-money-check
<i class="fi-money-check"></i>fi-monitor
<i class="fi-monitor"></i>fi-moon
<i class="fi-moon"></i>fi-more-horizontal
<i class="fi-more-horizontal"></i>fi-more-vertical
<i class="fi-more-vertical"></i>fi-mouse-pointer
<i class="fi-mouse-pointer"></i>fi-move
<i class="fi-move"></i>fi-music
<i class="fi-music"></i>fi-navigation
<i class="fi-navigation"></i>fi-navigation-2
<i class="fi-navigation-2"></i>fi-no-smoking
<i class="fi-no-smoking"></i>fi-no-smoking-circle
<i class="fi-no-smoking-circle"></i>fi-ovenbake
<i class="fi-oven"></i>fi-package
<i class="fi-package"></i>fi-paperclip
<i class="fi-paperclip"></i>fi-park
<i class="fi-park"></i>fi-parking
<i class="fi-parking"></i>fi-pause
<i class="fi-pause"></i>fi-pause-circle
<i class="fi-pause-circle"></i>fi-pawpet animal
<i class="fi-paw"></i>fi-pen-tool
<i class="fi-pen-tool"></i>fi-percent
<i class="fi-percent"></i>fi-phone
<i class="fi-phone"></i>fi-phone-call
<i class="fi-phone-call"></i>fi-phone-forwarded
<i class="fi-phone-forwarded"></i>fi-phone-incoming
<i class="fi-phone-incoming"></i>fi-phone-missed
<i class="fi-phone-missed"></i>fi-phone-off
<i class="fi-phone-off"></i>fi-phone-outgoing
<i class="fi-phone-outgoing"></i>fi-pie-chart
<i class="fi-pie-chart"></i>fi-play
<i class="fi-play"></i>fi-play-circle
<i class="fi-play-circle"></i>fi-play-filled
<i class="fi-play-filled"></i>fi-plus
<i class="fi-plus"></i>fi-plus-circle
<i class="fi-plus-circle"></i>fi-plus-square
<i class="fi-plus-square"></i>fi-power
<i class="fi-power"></i>fi-printer
<i class="fi-printer"></i>fi-radiosignal
<i class="fi-radio"></i>fi-refresh-ccw
<i class="fi-refresh-ccw"></i>fi-refresh-cw
<i class="fi-refresh-cw"></i>fi-rewind
<i class="fi-rewind"></i>fi-rocket
<i class="fi-rocket"></i>fi-rotate-ccw
<i class="fi-rotate-ccw"></i>fi-rotate-cw
<i class="fi-rotate-cw"></i>fi-rss
<i class="fi-rss"></i>fi-rulersize
<i class="fi-ruler"></i>fi-save
<i class="fi-save"></i>fi-scan
<i class="fi-scan"></i>fi-schedulecalendar time date
<i class="fi-schedule"></i>fi-scissors
<i class="fi-scissors"></i>fi-search
<i class="fi-search"></i>fi-send
<i class="fi-send"></i>fi-server
<i class="fi-server"></i>fi-settingscog
<i class="fi-settings"></i>fi-share
<i class="fi-share"></i>fi-share-2
<i class="fi-share-2"></i>fi-shield
<i class="fi-shield"></i>fi-shield-off
<i class="fi-shield-off"></i>fi-shopping-bag
<i class="fi-shopping-bag"></i>fi-shopping-cart
<i class="fi-shopping-cart"></i>fi-shower
<i class="fi-shower"></i>fi-shuffle
<i class="fi-shuffle"></i>fi-sidebar
<i class="fi-sidebar"></i>fi-skip-back
<i class="fi-skip-back"></i>fi-skip-forward
<i class="fi-skip-forward"></i>fi-sliderssettings
<i class="fi-sliders"></i>fi-smartphone
<i class="fi-smartphone"></i>fi-smileemoji happy
<i class="fi-smile"></i>fi-snowflakewinter
<i class="fi-snowflake"></i>fi-sort
<i class="fi-sort"></i>fi-speaker
<i class="fi-speaker"></i>fi-star
<i class="fi-star"></i>fi-star-half
<i class="fi-star-half"></i>fi-star-filled
<i class="fi-star-filled"></i>fi-stop-circle
<i class="fi-stop-circle"></i>fi-sun
<i class="fi-sun"></i>fi-sunrise
<i class="fi-sunrise"></i>fi-sunset
<i class="fi-sunset"></i>fi-swatchescolor fill paint
<i class="fi-swatches"></i>fi-table
<i class="fi-table"></i>fi-tablet
<i class="fi-tablet"></i>fi-tachometerdashboard
<i class="fi-tachometer"></i>fi-tag
<i class="fi-tag"></i>fi-target
<i class="fi-target"></i>fi-terminal
<i class="fi-terminal"></i>fi-thermometer
<i class="fi-thermometer"></i>fi-thumbs-downdislike
<i class="fi-thumbs-down"></i>fi-thumbs-updislike
<i class="fi-thumbs-up"></i>fi-ticketcoupon voucher
<i class="fi-ticket"></i>fi-toolwrench
<i class="fi-tool"></i>fi-tramtransport wagon carriage
<i class="fi-tram"></i>fi-trash
<i class="fi-trash"></i>fi-trash-empty
<i class="fi-trash-empty"></i>fi-tree
<i class="fi-tree"></i>fi-trending-down
<i class="fi-trending-down"></i>fi-trending-up
<i class="fi-trending-up"></i>fi-triangle
<i class="fi-triangle"></i>fi-truckdelivery
<i class="fi-truck"></i>fi-tv
<i class="fi-tv"></i>fi-type
<i class="fi-type"></i>fi-umbrella
<i class="fi-umbrella"></i>fi-unlock
<i class="fi-unlock"></i>fi-upload
<i class="fi-upload"></i>fi-upload-cloud
<i class="fi-upload-cloud"></i>fi-user
<i class="fi-user"></i>fi-user-check
<i class="fi-user-check"></i>fi-user-plus
<i class="fi-user-plus"></i>fi-user-x
<i class="fi-user-x"></i>fi-video
<i class="fi-video"></i>fi-video-off
<i class="fi-video-off"></i>fi-voicemail
<i class="fi-voicemail"></i>fi-volume
<i class="fi-volume"></i>fi-volume-1
<i class="fi-volume-1"></i>fi-volume-2
<i class="fi-volume-2"></i>fi-volume-x
<i class="fi-volume-x"></i>fi-walkpedestrian
<i class="fi-walk"></i>fi-washing-machine
<i class="fi-washing-machine"></i>fi-watchtime
<i class="fi-watch"></i>fi-wheelchairhandicapped invalid disabled
<i class="fi-wheelchair"></i>fi-wifi
<i class="fi-wifi"></i>fi-wifi-off
<i class="fi-wifi-off"></i>fi-wind
<i class="fi-wind"></i>fi-winedrink
<i class="fi-wine"></i>fi-zaplightning
<i class="fi-zap"></i>fi-zap-offlightning
<i class="fi-zap-off"></i>fi-zoom-in
<i class="fi-zoom-in"></i>fi-zoom-out
<i class="fi-zoom-out"></i>Brand icons
fi-airbnb
<i class="fi-airbnb"></i>fi-apple
<i class="fi-apple"></i>fi-behance
<i class="fi-behance"></i>fi-blogger
<i class="fi-blogger"></i>fi-codepen
<i class="fi-codepen"></i>fi-discord
<i class="fi-discord"></i>fi-disqus
<i class="fi-disqus"></i>fi-dribbble
<i class="fi-dribbble"></i>fi-dropbox
<i class="fi-dropbox"></i>fi-envato
<i class="fi-envato"></i>fi-evernote
<i class="fi-evernote"></i>fi-facebook
<i class="fi-facebook"></i>fi-flickr
<i class="fi-flickr"></i>fi-foursquare
<i class="fi-foursquare"></i>fi-github
<i class="fi-github"></i>fi-google
<i class="fi-google"></i>fi-google-drive
<i class="fi-google-drive"></i>fi-google-play
<i class="fi-google-play"></i>fi-hangouts
<i class="fi-hangouts"></i>fi-instagram
<i class="fi-instagram"></i>fi-kickstarter
<i class="fi-kickstarter"></i>fi-linkedin
<i class="fi-linkedin"></i>fi-medium
<i class="fi-medium"></i>fi-messenger
<i class="fi-messenger"></i>fi-myspace
<i class="fi-myspace"></i>fi-odnoklassniki
<i class="fi-odnoklassniki"></i>fi-open-source
<i class="fi-open-source"></i>fi-patreon
<i class="fi-patreon"></i>fi-pinterest
<i class="fi-pinterest"></i>fi-product-hunt
<i class="fi-product-hunt"></i>fi-quora
<i class="fi-quora"></i>fi-reddit
<i class="fi-reddit"></i>fi-rss-2
<i class="fi-rss-2"></i>fi-skype
<i class="fi-skype"></i>fi-slack
<i class="fi-slack"></i>fi-snapchat
<i class="fi-snapchat"></i>fi-soundcloud
<i class="fi-soundcloud"></i>fi-spotify
<i class="fi-spotify"></i>fi-stack-overflow
<i class="fi-stack-overflow"></i>fi-steam
<i class="fi-steam"></i>fi-stumbleupon
<i class="fi-stumbleupon"></i>fi-telegram
<i class="fi-telegram"></i>fi-tiktok
<i class="fi-tiktok"></i>fi-tinder
<i class="fi-tinder"></i>fi-trello
<i class="fi-trello"></i>fi-tumblr
<i class="fi-tumblr"></i>fi-twitch
<i class="fi-twitch"></i>fi-xtwitter
<i class="fi-x"></i>fi-viber
<i class="fi-viber"></i>fi-vimeo
<i class="fi-vimeo"></i>fi-vk
<i class="fi-vk"></i>fi-wechat
<i class="fi-wechat"></i>fi-whatsapp
<i class="fi-whatsapp"></i>fi-xing
<i class="fi-xing"></i>fi-yelp
<i class="fi-yelp"></i>fi-youtube
<i class="fi-youtube"></i>Animate on hover
<!-- Icon animations on hover -->
<!-- Shake -->
<button type="button" class="btn btn-icon btn-lg btn-outline-secondary animate-shake fs-xl" aria-label="Shake icon">
<i class="fi-bell animate-target"></i>
</button>
<!-- Pulse -->
<button type="button" class="btn btn-icon btn-lg btn-outline-secondary animate-pulse fs-xl" aria-label="Pulse icon">
<i class="fi-heart animate-target"></i>
</button>
<!-- Rotate -->
<button type="button" class="btn btn-icon btn-lg btn-outline-secondary animate-rotate fs-xl" aria-label="Rotate icon">
<i class="fi-refresh-cw animate-target"></i>
</button>
<!-- Scale -->
<button type="button" class="btn btn-icon btn-lg btn-outline-secondary animate-scale fs-xl" aria-label="Scale icon">
<i class="fi-search animate-target"></i>
</button>
<!-- Slide up -->
<button type="button" class="btn btn-icon btn-lg btn-outline-secondary animate-slide-up fs-xl" aria-label="Slide up icon">
<i class="fi-arrow-up animate-target"></i>
</button>
<!-- Slide end -->
<button type="button" class="btn btn-icon btn-lg btn-outline-secondary animate-slide-end fs-xl" aria-label="Slide end icon">
<i class="fi-arrow-right animate-target"></i>
</button>
<!-- Slide down -->
<button type="button" class="btn btn-icon btn-lg btn-outline-secondary animate-slide-down fs-xl" aria-label="Slide down icon">
<i class="fi-arrow-down animate-target"></i>
</button>
<!-- Slide start -->
<button type="button" class="btn btn-icon btn-lg btn-outline-secondary animate-slide-start fs-xl" aria-label="Slide start icon">
<i class="fi-arrow-left animate-target"></i>
</button>