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
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" />
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>
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>
Designed and maintained with by @jmjuanes.
Code is licensed under MIT, documentation under Creative Commons Attribution 4.0.