Heroicons — 154 SVG Icons You Can Customize Using CSS

Heroicons — 154 SVG Icons You Can Customize Using CSS


We’ve written about icons plenty of times in the past, but this is the first time we’ve come across an icon set like this one. Heroicons is a set of beautiful icons designed to be customized any way you want, using CSS or SASS.

The set contains a total of 154 icons, all of which can be customized to your liking. These are SVG icons and come in two sizes. Unlike most other icons, Heroicons gives you the special ability to pick a color for specific areas of the icons. Take for example an icon for a house. Here’s what you can do with Heroicons:

Heroicons CSS Code

Awesome, isn’t it?

Heroicons are priced at $99, but are currently available at a discounted pricing of $69 for a limited time. You get the 154 icons in two sizes each, a sketch file organized with shared styles, sample stylesheets, and free updates forever.

If you want to try the icons before you buy, you can sign up and get 10 sample icons for Free from the website here.


Preshit Deorukhkar is the former Editor-in-Chief of Beautiful Pixels. He is now a Freelance Consultant, Principal at iXyr Media & SharpShutter Media. You can reach him on Twitter @preshit