alarm-fill
alarm
align-bottom
align-center
align-left
align-middle
align-right
align-top
archivebox-fill
archivebox
arrow-anticlockwise
arrow-clockwise
arrow-down-circle-fill
arrow-down-circle
arrow-down-left-and-arrow-up-right
arrow-down-wide
arrow-down
arrow-left-circle-fill
arrow-left-circle
arrow-left-wide
arrow-left
arrow-right-circle-fill
arrow-right-circle
arrow-right-wide
arrow-right
arrow-shape-right
arrow-up-circle-fill
arrow-up-circle
arrow-up-right-and-arrow-down-left
arrow-up-wide
arrow-up
bank-fill
bank
bell-fill
bell-slash-fill
bell-slash
bell
bezier
blood-pressure
book
bookmark-fill
bookmark
border-all
border-bottom
border-center
border-inner
border-left
border-middle
border-none
border-outer
border-right
border-top
bubble-circle-dot
bubble-circle-dots-fill
bubble-circle-plus-fill
bubble-circle-plus
bubble-circle-text-fill
bubble-circle-text
bubble-square-dots-fill
bubble-square-dots
bubble-square-plus-fill
bubble-square-plus
bubble-square-text-2-fill
bubble-square-text-2
bubble-square-text-fill
bubble-square-text
building-fill
building
bulb-fill
bulb
businessbag
calendar-fill
calendar-month-fill
calendar-month
calendar-range-fill
calendar-range
calendar
camera-fill
camera
cart-fill
cart
chart-bar-square-fill
chart-bar-square
chart-bar
chart-line-square-fill
chart-line-square
chart-line
chart-pie-fill
chart-pie
checkmark-2
checkmark-circle-fill
checkmark-circle
checkmark-square-fill
checkmark-square
checkmark
chevron-down-circle-fill
chevron-down-circle
chevron-down-square-fill
chevron-down-square
chevron-down
chevron-left-circle-fill
chevron-left-circle
chevron-left-more
chevron-left-square-fill
chevron-left-square
chevron-left
chevron-right-circle-fill
chevron-right-circle
chevron-right-more
chevron-right-square-fill
chevron-right-square
chevron-right
chevron-up-circle-fill
chevron-up-circle
chevron-up-square-fill
chevron-up-square
chevron-up
circle-dash
circle-fill
circle
clock-fill
clock-rotate-left
clock-rotate-right
clock
cloud-arrow-up-fill
cloud-arrow-up
cloud-checkmark-fill
cloud-checkmark
cloud-fill
cloud
code-slash
code
connection-fill
connection
connector-down-right-up-left
connector-down-right
crop
cube
cursor-fill
cursor
cylinder-horizontal
cylinder
db-dot-fill
db-dot
db-fill
db-front-dot-fill
db-front-dot
db
display
distribute-horizontally
distribute-verticaly
doc-checkmark-fill
doc-checkmark
doc-csv
doc-docx
doc-fill
doc-minus-fill
doc-minus
doc-pdf
doc-plus-fill
doc-plus
doc-pptx
doc-text-fill
doc-text
doc-txt
doc-xlsx
doc-zip
doc
dots-grid
dots-horizontal-circle
dots-horizontal
dots-vertical
earth-fill
earth
exclamationmark-circle-fill
exclamationmark-circle
exclamationmark-triangle-fill
exclamationmark-triangle
exclamationmark
eye-fill
eye-slash-fill
eye-slash
eye
face-crying
face-frowing-little
face-frowing
face-grinning
face-neutral
face-pensive
face-smiling-little
face-smiling-tightly-closed-eyes
face-smiling
filter
flag-fill
flag
folder-fill
folder
gear-fill
gear
graduationcap-fill
graduationcap
grid-2x1-fill
grid-2x1
grid-bordered
grid-fill
grid
headphones-fill
headphones
headset-fill
headset-operator
headset
heart-circle-fill
heart-circle
heart-fill
heart
heartbeat
hexagon-fill
hexagon
home-fill
home
informationmark-circle-fill
informationmark-circle
key
laptop
layer
lightbulb-fill
lightbulb
lightning-bolt-fill
lightning-bolt
lightning-fill
lightning
line-arrow-down
line-arrow-up
link
list-bullet
list-check
list-number
list-start
list-todo
lock-fill
lock-open-fill
lock-open
lock
magnifyingglass-minus-fill
magnifyingglass-minus
magnifyingglass-plus-fill
magnifyingglass-plus
magnifyingglass
mail-fill
mail
map-fill
map
mappin-fill
mappin
menu
microphone-fill
microphone
minus-circle-fill
minus-circle
minus-square-fill
minus-square
minus
mobile-button-landscape
mobile-button
mobile-landscape
mobile
network-fill
network
new-circle-fill
new-circle
new-square-fill
new-square
paperclip
party-popper
pause-circle-fill
pause-circle
pause-fill
pencil-circle-fill
pencil-circle
pencil-to-square
pencil
person-2-fill
person-2-minus-fill
person-2-minus
person-2-plus-fill
person-2-plus
person-2
person-3-fill
person-3-minus-fill
person-3-minus
person-3-plus-fill
person-3-plus
person-3
person-checkmark-fill
person-checkmark
person-circle-checkmark-fill
person-circle-checkmark
person-circle-fill
person-circle-minus-fill
person-circle-minus
person-circle-plus-fill
person-circle-plus
person-circle-slash-fill
person-circle-slash
person-circle
person-fill
person-minus-fill
person-minus
person-plus-fill
person-plus
person-slash-fill
person-slash
person-tie-fill
person
photo-2
photo-fill
photo
play-circle-fill
play-circle
play-fill
play-square-fill
play-square
plus-circle-fill
plus-circle
plus-square-fill
plus-square
plus
printer-fill
printer
questionmark-circle-fill
questionmark-circle
questionmark
rectangle-arrow-up-right
rectangle-in-arrow-down
rectangle-on-rectangle-fill
rectangle-on-rectangle
rectangle-out-arrow-up
scissors
sd-card-fill
sd-card
slash-circle-fill
slash-circle
speaker-fill
speaker-slash-fill
speaker-slash
speaker
square-dash
square-fill
square
star-fill
star
stop-circle-fill
stop-circle
stop
stopwatch-fill
stopwatch
structure
table
tablet-button-landscape
tablet-button
tablet-landscape
tablet
tag-fill
tag
target
terminal
text
thermometer
thumbsup-fill
thumbsup
timelapse
trash-fill
trash
triangle-down-circle-fill
triangle-down-circle
triangle-down-square-fill
triangle-down-square
triangle-down
triangle-up-circle-fill
triangle-up-circle
triangle-up-square-fill
triangle-up-square
triangle-up
trim
video-fill
video
waveform-lines
wifi
window
xmark-circle-fill
xmark-circle
xmark-large
xmark-square-fill
xmark-square
xmark

Install

npm

Install exaBase Design System Icons from npm - including SVGs, icon fonts and CSS files.

Then import CSS to your Javascript file.

CDN

Download

Manually download SVGs, icon fonts and CSS files.

Download ZIP

Usage

Embedded

The quickest way to use icons is to copy the SVG code of the icon you need and inline it directly into your HTML. You can get the SVG code by clicking on the icon on this page.

The size can be changed with the `width` and `height` attributes, and the color can be changed with the `fill` attribute.

External image

Put the icon SVG files to your directory and reference them with the `<img>` element.

Icon font

After importing the CSS file into your website using one of the ways described in Install, copy and paste the HTML code for the icon you want into your HTML. You can get the HTML code by clicking on the icons on this page.

Size and color can be changed by `font-size` and `color` with custom CSS.

Updates

License

exaBase Design System Icons is licensed under the MIT License.

icon-key

Tags:

HTML

Codepoint

Unicode:
CSS:
JS:
HTML:

SVG

Color

Code

File