exaBase Design System Icons

Collection of generic, simple and neutrally designed icons that is free for personal and commercial use.

alarm
alarm-fill
align-bottom
align-center
align-left
align-middle
align-right
align-top
aperture
aperture-fill
archivebox
archivebox-fill
arrow-anticlockwise
arrow-back-left
arrow-back-right
arrow-clockwise
arrow-down
arrow-down-circle
arrow-down-circle-fill
arrow-down-left-and-arrow-up-right
arrow-down-wide
arrow-left
arrow-left-circle
arrow-left-circle-fill
arrow-left-wide
arrow-right
arrow-right-circle
arrow-right-circle-fill
arrow-right-wide
arrow-rounded
arrow-rounded-slash
arrow-shape-right
arrow-up
arrow-up-and-arrow-down
arrow-up-circle
arrow-up-circle-fill
arrow-up-right-and-arrow-down-left
arrow-up-wide
article
badge
bandade
bandade-fill
bank
bank-fill
barcode-viewfinder
bell
bell-fill
bell-slash
bell-slash-fill
bezier
blood-pressure
book
bookmark
bookmark-fill
border-all
border-bottom
border-center
border-inner
border-left
border-middle
border-none
border-outer
border-right
border-top
box-in-arrow-down
box-in-arrow-right
box-out-arrow-right
box-out-arrow-up
braces
brush
brush-fill
bubble-circle-dot
bubble-circle-dots-fill
bubble-circle-plus
bubble-circle-plus-fill
bubble-circle-text
bubble-circle-text-fill
bubble-square-dots
bubble-square-dots-fill
bubble-square-plus
bubble-square-plus-fill
bubble-square-text
bubble-square-text-2
bubble-square-text-2-fill
bubble-square-text-fill
building
building-fill
bulb
bulb-fill
businessbag
businessbag-fill
calculator
calculator-fill
calendar
calendar-fill
calendar-month
calendar-month-fill
calendar-range
calendar-range-fill
camera
camera-fill
camera-plus
camera-plus-fill
cardboard-box
cart
cart-fill
chart-bar
chart-bar-horizontal
chart-bar-horizontal-square
chart-bar-horizontal-square-fill
chart-bar-square
chart-bar-square-fill
chart-line
chart-line-square
chart-line-square-fill
chart-pie
chart-pie-fill
checkmark
checkmark-2
checkmark-circle
checkmark-circle-fill
checkmark-square
checkmark-square-fill
chevron-down
chevron-down-2
chevron-down-circle
chevron-down-circle-fill
chevron-down-square
chevron-down-square-fill
chevron-left
chevron-left-2
chevron-left-circle
chevron-left-circle-fill
chevron-left-more
chevron-left-square
chevron-left-square-fill
chevron-right
chevron-right-2
chevron-right-circle
chevron-right-circle-fill
chevron-right-more
chevron-right-square
chevron-right-square-fill
chevron-up
chevron-up-2
chevron-up-circle
chevron-up-circle-fill
chevron-up-square
chevron-up-square-fill
circle
circle-bold
circle-dash
circle-fill
circle-square
clipboard
clock
clock-fill
clock-rotate-left
clock-rotate-right
cloud
cloud-arrow-up
cloud-arrow-up-fill
cloud-checkmark
cloud-checkmark-fill
cloud-drizzle
cloud-fill
cloud-rain
cloud-rain-heavy
cloud-slash
cloud-slash-fill
code
code-slash
coffee
coffee-fill
compass
compass-fill
conical-flask
conical-flask-fill
connection
connection-fill
connector-down-right
connector-down-right-up-left
cpu
cpu-fill
creditcard
creditcard-fill
crop
cube
cursor
cursor-fill
cylinder
cylinder-horizontal
db
db-dot
db-dot-fill
db-fill
db-front-dot
db-front-dot-fill
display
distribute-horizontally
distribute-verticaly
doc
doc-checkmark
doc-checkmark-fill
doc-csv
doc-docx
doc-fill
doc-minus
doc-minus-fill
doc-pdf
doc-plus
doc-plus-fill
doc-pptx
doc-text
doc-text-fill
doc-txt
doc-xlsx
doc-yaml
doc-zip
dots-6-horizontal
dots-6-vertical
dots-grid
dots-horizontal
dots-horizontal-circle
dots-vertical
ear
ear-fill
earth
earth-fill
exclamationmark
exclamationmark-circle
exclamationmark-circle-fill
exclamationmark-triangle
exclamationmark-triangle-fill
eye
eye-fill
eye-slash
eye-slash-fill
face-angry
face-baby
face-crying
face-frowing
face-frowing-little
face-grinning
face-neutral
face-pensive
face-smiling
face-smiling-little
face-smiling-plus
face-smiling-tightly-closed-eyes
filter
filter-list
first-aid-kit
first-aid-kit-fill
flag
flag-fill
flame
flame-fill
folder
folder-fill
folder-minus
folder-minus-fill
folder-plus
folder-plus-fill
funnel
funnel-fill
gear
gear-fill
gift
gift-fill
graduationcap
graduationcap-fill
grid
grid-2x1
grid-2x1-fill
grid-bordered
grid-fill
hand
hand-fist
hand-index-up
headphones
headphones-fill
headset
headset-fill
headset-operator
heart
heart-circle
heart-circle-fill
heart-fill
heartbeat
hexagon
hexagon-fill
home
home-fill
hourglass
hourglass-lower-filled
hourglass-split
hourglass-upper-filled
informationmark-circle
informationmark-circle-fill
key
key-fill
keyboard
keyboard-fill
laptop
layer
lightning
lightning-bolt
lightning-bolt-fill
lightning-bolt-fill-slash
lightning-fill
lightning-slash
lightning-slash-fill
line-arrow-down
line-arrow-left
line-arrow-right
line-arrow-up
link
list-bullet
list-check
list-number
list-start
list-todo
location
location-fill
lock
lock-fill
lock-open
lock-open-fill
lungs
lungs-fill
magnifyingglass
magnifyingglass-minus
magnifyingglass-minus-fill
magnifyingglass-plus
magnifyingglass-plus-fill
mail
mail-fill
map
map-fill
mappin
mappin-fill
megaphone
megaphone-fill
memory-ic
memory-ic-fill
menu
microphone
microphone-fill
minus
minus-circle
minus-circle-fill
minus-square
minus-square-fill
mobile
mobile-button
mobile-button-landscape
mobile-landscape
moon
moon-fill
musical-note
musical-note-fill
musical-notes
musical-notes-fill
network
network-fill
new-circle
new-circle-fill
new-square
new-square-fill
notebook
notebook-fill
paperclip
paperplane
paperplane-fill
party-popper
pause-circle
pause-circle-fill
pause-fill
pencil
pencil-circle
pencil-circle-fill
pencil-fill
pencil-to-square
person
person-2
person-2-fill
person-2-minus
person-2-minus-fill
person-2-plus
person-2-plus-fill
person-3
person-3-fill
person-3-minus
person-3-minus-fill
person-3-plus
person-3-plus-fill
person-card
person-checkmark
person-checkmark-fill
person-circle
person-circle-checkmark
person-circle-checkmark-fill
person-circle-fill
person-circle-minus
person-circle-minus-fill
person-circle-plus
person-circle-plus-fill
person-circle-slash
person-circle-slash-fill
person-edit
person-edit-fill
person-fill
person-minus
person-minus-fill
person-plus
person-plus-fill
person-slash
person-slash-fill
person-tie-fill
photo
photo-2
photo-fill
pill
pin
pin-fill
play-circle
play-circle-fill
play-fill
play-square
play-square-fill
plus
plus-circle
plus-circle-fill
plus-square
plus-square-fill
printer
printer-fill
qr-code-viewfinder
questionmark
questionmark-circle
questionmark-circle-fill
receipt
recording
rectangle-arrow-up
rectangle-arrow-up-fill
rectangle-arrow-up-right
rectangle-in-arrow-down
rectangle-in-arrow-right
rectangle-on-rectangle
rectangle-on-rectangle-fill
rectangle-out-arrow-right
rectangle-out-arrow-up
robot-arm
scissors
sd-card
sd-card-fill
shield
shield-check
shield-check-fill
shield-exclamationmark
shield-exclamationmark-fill
shield-fill
shield-shaded
shield-xmark
shield-xmark-fill
sidebar-left
sidebar-right
slash
slash-circle
slash-circle-fill
snowflake
sort-alpha-asc
sort-alpha-desc
sort-list-asce
sort-list-desc
sparkles
sparkles-fill
sparkles-fill-slash
speaker-slash
speaker-slash-fill
speaker-wave1
speaker-wave1-fill
speaker-wave2
speaker-wave2-fill
speaker-wave3
speaker-wave3-fill
square
square-dash
square-fill
star
star-fill
stethoscope
stick-sparkles
stickynote
stickynote-fill
stop
stop-circle
stop-circle-fill
stopwatch
stopwatch-fill
structure
subtitles
subtitles-fill
sun
sun-fill
syringe
syringe-fill
table
tablet
tablet-button
tablet-button-landscape
tablet-landscape
tag
tag-fill
target
terminal
text
text-align-center
text-align-justify-left
text-align-left
text-align-right
text-bold
text-double-quotes
text-h
text-italic
text-strikethrough
text-underline
thermometer
thumbsup
thumbsup-fill
timelapse
tooth
tooth-fill
translate
translate-slash
trash
trash-fill
trash-xmark
trash-xmark-fill
triangle-down
triangle-down-circle
triangle-down-circle-fill
triangle-down-small
triangle-down-square
triangle-down-square-fill
triangle-left
triangle-left-circle
triangle-left-circle-fill
triangle-left-small
triangle-left-square
triangle-left-square-fill
triangle-right
triangle-right-circle
triangle-right-circle-fill
triangle-right-small
triangle-right-square
triangle-right-square-fill
triangle-up
triangle-up-circle
triangle-up-circle-fill
triangle-up-small
triangle-up-square
triangle-up-square-fill
trim
trolley
truck
truck-fill
video
video-fill
video-plus
video-plus-fill
viewfinder
vitalsigns
wallet
watch
watch-fill
waveform-lines
wheelchair
wifi
wifi-slash
window
window-sidebar-left
xmark
xmark-circle
xmark-circle-fill
xmark-large
xmark-square
xmark-square-fill
yensign

Installation

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.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32" fill="#000000">
  <path d="M16.0001 28C16.2653 28 16.5196 27.8946 16.7072 27.7071L27.7102 16.7041C28.1007 16.3136 28.1007 15.6804 27.7102 15.2899C27.3196 14.8994 26.6865 14.8994 26.2959 15.2899L17.0001 24.5858L17.0001 5C17.0001 4.44772 16.5523 4 16.0001 4C15.4478 4 15.0001 4.44772 15.0001 5L15.0001 24.5858L5.70418 15.2899C5.31365 14.8994 4.68049 14.8994 4.28996 15.2899C3.89944 15.6804 3.89944 16.3136 4.28996 16.7041L15.2929 27.7071C15.4805 27.8946 15.7348 28 16.0001 28Z"/>
</svg>

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

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32" fill="#1400c8">
  <path d="M16.0001 28C16.2653 28 16.5196 27.8946 16.7072 27.7071L27.7102 16.7041C28.1007 16.3136 28.1007 15.6804 27.7102 15.2899C27.3196 14.8994 26.6865 14.8994 26.2959 15.2899L17.0001 24.5858L17.0001 5C17.0001 4.44772 16.5523 4 16.0001 4C15.4478 4 15.0001 4.44772 15.0001 5L15.0001 24.5858L5.70418 15.2899C5.31365 14.8994 4.68049 14.8994 4.28996 15.2899C3.89944 15.6804 3.89944 16.3136 4.28996 16.7041L15.2929 27.7071C15.4805 27.8946 15.7348 28 16.0001 28Z"/>
</svg>

React

Install react version icons from npm:

npm i @exawizards/exabase-design-system-icons

Then import the icon you want to use in your React component:

import { CheckmarkCircleIcon } from "@exawizards/exabase-design-system-icons/react"
 
function MyComponent() {
  return (
    <CheckmarkCircleIcon />
  )
}

Props

PropTypeDefaultNote
sizenumber16Set icon height and size.
titlestringundefinedInsert a title element into the svg, and remove the aria-hidden="true" from the svg.
titleIdstringundefinedAdd an id attribute to the title element, and add an aria-labelledby={titleId} attribute.

More details: @exawizards/exabase-design-system-icons-react (opens in a new tab)

Icon font

Install icon fonts and CSS files from npm:

npm i @exawizards/exabase-design-system-icons

Or install from CDN:

https://cdn.jsdelivr.net/npm/@exawizards/exabase-design-system-icons@1.5.0/font/exabase-design-system-icons.css

Then import CSS to your Javascript file:

import "@exawizards/exabase-design-system-icons/font/exabase-design-system-icons.css"

After import, 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.

<i class="ei ei-bookmark-fill"></i>

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

<i class="ei ei-bookmark-fill" style="font-size: 16px; color: #1400c8;"></i>

Updates

1.5.0
Added 18 icons and some icons were modified
1.4.0
Added 51 icons and some icons were modified
1.3.0
Added 27 icons and some icons were modified
1.2.0
Added 41 icons and some icons were modified
1.1.1
Fixed a problem where some icons added in 1.0.0 were not included in the css and woff2
1.1.0
Added 64 icons and some icons were modified
1.0.0
First release

License

exaBase Design System Icons is licensed under the MIT License (opens in a new tab).