Pure CSS icons made simple.
Siimple Icons is an Open Source SVG icons library that you can include in your project with just a single .css file.

Installation

Package manager

You can use npm or yarn for adding the siimple-icons package your project. This package includes the icons CSS styles and the SVG sprite.

$ npm install --save siimple-icons

Public CDN

Use our public CDN for adding icons styles to your HTML file. Just add the following line in the <head> section of your HTML file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/siimple-icons/siimple-icons.css" />

Usage

Using CSS

Just include siimple-icons.css in your HTML document and reference any icon using the class si-* (for example, si-home).

You can use color and font-size style properties to customize the icon color and size.

<i class="si-home" style="font-size: 32px;"></i>
<i class="si-emoji-confused" style="color: #f0a905; font-size: 32px;"></i>

Using SVG sprite

Use the SVG sprite siimple-icons.svg to insert any icon through the <use> element and using the icon ID as the fragment identifier.

You can customize the icon color using the stroke attribute or the icon size using width and height.

<svg width="32" height="32" stroke="currentColor">
    <use xlink:href="siimple-icons.svg#image" />
</svg>

Explore icons

255 icons
address-book
align-bottom
align-center
align-left
align-middle
align-right
align-top
archive
arrow-alt-down
arrow-alt-left
arrow-alt-right
arrow-alt-up
arrow-circle-down
arrow-circle-left
arrow-circle-right
arrow-circle-up
arrow-down
arrow-down-left
arrow-down-right
arrow-left
arrow-right
arrow-up
arrow-up-left
arrow-up-right
arrows
arrows-maximize
arrows-minimize
arrows-shuffle
back
backpack
backspace
bag
ban
bars
bell
bezier
bold
bolt
book
book-open
bookmark
box
briefcase
brush
bug
calendar
camera
caret-down
caret-left
caret-right
caret-up
cart
chart-area
chart-bar
chart-line
chart-pie
chat
chat-dots
check
check-circle
check-square
chevron-down
chevron-left
chevron-right
chevron-up
circle
circle-fill
circle-half
clipboard
clock
close
cloud
cloud-rain
code
code-square
coffee
compass
copy
credit-card
crop
cut
disk
dna
download
droplet
edit
emoji-confused
emoji-empty
emoji-expressionless
emoji-laugh
emoji-neutral
emoji-sad
emoji-smile
emoji-surprise
emoji-wink
envelope
erase
exclamation-circle
exclamation-square
exclamation-triangle
external-link
eye
eye-slash
file
file-check
file-dots
file-empty
file-minus
file-plus
file-x
files
fill
filter
flag
flask
folder
folder-check
folder-minus
folder-plus
folder-x
folders
frame
front
fullscreen
fullscreen-exit
gift
git-branch
git-commit
git-merge
git-pull-request
globe
grid
hamburger
headphones
heart
history
history-redo
history-undo
home
image
inbox
info-circle
info-square
italic
keyboard
laptop
layout
lightbulb
line
line-hr
line-vr
link
location
lock
login
logout
map
megaphone
message
microphone
minus
minus-circle
minus-square
mobile
money
monitor
moon
mouse
mug
music-note
music-player
news
note
notebook
notepad
object-group
object-ungroup
palette
path
pause
pen
pencil
pin
play
plus
plus-circle
plus-square
pointer
postcard
presentation
printer
puzzle
question-circle
question-square
quote
rocket
ruler
search
send
server
shapes
share
shield
shield-check
shield-x
siimple
sliders
soda-cup
square
square-fill
square-half
stack
star
star-half
step-backward
step-forward
stop
sun
table
tablet
terminal
text
text-center
text-justify
text-left
text-right
ticket
togo-cup
tools
tower
trash
trophy
tv
tv-retro
umbrella
underline
unlock
upload
user
user-circle
user-minus
user-plus
user-x
video
virus
volume-down
volume-mute
volume-up
wallet
window
x
x-circle
x-square
zoom-in
zoom-out

Designed and maintained with by @jmjuanes.

Code is licensed under MIT, documentation under Creative Commons Attribution 4.0.

Currently v4.3.1