105
adjust-color
archive
arrow-basic-down
arrow-basic-left
arrow-basic-right
arrow-basic-up
arrow-filled-down
arrow-filled-left
arrow-filled-right
arrow-filled-up
arrow-right
art-spraycan
asterisk
ball-basketball
ball-rugby
ball-tennis
ball-volleyball
ban
battery-25
battery-50
battery-75
battery-empty
battery-full
bed
birdhouse
book
bottle
burger
check
code
copy
cosmetics-lipstick
creditcard
device-camera
device-laptop
device-phone
device-printer
device-screen
device-tablet
device-tv
file-download
file-export
file-import
file-upload
float
glass-wine
globe
go-down
go-left
go-right
go-up
home
label
link
loading-spinner
location
lock-open
lock
mail
map
math-minus
math-plus
math-times
office-marker
office-paperclip
office-pencil
office-scissors
paste
picture
power-socket-eu
power-socket-us
refresh
reload
retweet
save
search
shape-circle
shape-drop
shape-heart
shape-square
smiley-angry
smiley-cry
smiley-grin
smiley-happy
smiley-sad
smiley-wink
suitcase
text-align-center
text-align-justify
text-align-left
text-align-right
time-clock
time-watch
trash
user
vehicle-car
volume-high
volume-low
volume-medium
volume-mute
volume-off
weather-sun
wifi
zoom-in
zoom-out
Class
.silicon-null
Mixin
@include silicon-null();

Use

Install

So, if you want to use these icons, be my guest! I even made it a little easier. You can easily install this package into your project using npm or yarn.

npm install silicons --save-dev or yarn add silicons

And import the file in your main scss file like:

@import '~silicons';

Find this project on github: gitbub/silvandiepen/silicons


npm version GitHub version

Settings

You can change some settings for the icons by defining some variable before you load 'silicons'.

Name Variable Default Description
Prefix $silicons-prefix silicon- The prefix is used for all icons.
stroke width $silicons-stroke 0.1 The stroke is used in 'em'. So the stroke is based on the font-size given to the element.

Colors

For the colored versions of the icons, only one set of specific colors is used. These colors can easily be changed by redefining the color. This can be done using a scss variable or with acustom property

the set
$variable custom-property default value
$silicon-color-black --black #101010
$silicon-color-white --white #ffffff
$silicon-color-offwhite --offwhite #f7f7f7
$silicon-color-gray --gray #7f7f7f
$silicon-color-green --green #10c565
$silicon-color-light-blue --light-blue #61caea
$silicon-color-blue --blue #1eb3e0
$silicon-color-dark-blue --dark-blue #188fb3
$silicon-color-red --red #eb0f33
$silicon-color-dark-red --dark-red #bb0c29
$silicon-color-brown --brown #aa834f
$silicon-color-beige --beige #cdb492
$silicon-color-yellow --yellow #f5c505
$silicon-color-orange --orange #f6790b
$silicon-color-pink --pink #ca1387
$silicon-color-purple --purple #7329b1
$silicon-color-turquoise --turquoise #3feac3
scss variable

You can redefine the color of a variable by just setting it before you import silicons. This will override the default color in silicons and will be used. note: a custom property, overrides the sass variable.

custom properties

Defining the color can also be done using a custom property, the properties as mentioned before are not set by silicons, but are getting used. The default color is the fallback color. In this way, a set custom propertie will override any color.

example:
Is the default icon which becomes the text color (white).
Is the default icon, with another text color set on the element.
has an extra "colored" class. The default color (turquoise) is used now.
here the --turquoise is set to red.


Mixins

All icons are build up in mixins. These mixins can be used when in you add silicons to your project. In this way you don't have to add all icons to your project and you are able to use your own classes.

for example:

The default class for the print icons is .silicon-printer, but you want to use this icon on the class .icon-print. In your project, just add @include silicon-printer('icon-print'); and this will output the code for the print icon on the class icon-print


Direct

You can alo just directly implement the css in your project. In this way you can use all the classes as they are.

https://cdn.silicons.nl/icons.min.css

About

Silicons is made by Sil van Diepen, hence then name.

I am Sil, a frontend developer and illustrator and I was inspired by different icon sets and techniques. It started as a challenge to make an iconset, which is easily useable without any actual images or fontstyles. The challenge turned into an actual usuable library as you can see here.

Way more icons will be added, but I need time!

In use

As far, there are no actual live projects live using this iconset, hope soon there will be some. From my hand there will be, but if you know any or build something yourself. Please let me know!

Can you make..

Ofcourse I can! Please send me an email and I can see what I can do.

Wanna support me?

If so, that would be awesome! Anything will do. I hope I can make more and more time for projects like this and be better and help people. If you help, I will make an on request for sure!

patreon

Do you have any requests, questions, wanna get in touch? Please do! Send me an me@silvandiepen.