Adobe designer Wenting Zhang created an interesting web app for generating pure CSS icons. It’s simply named “CSS Icon” and it may be one of the coolest icon generators for frontend developers.
This project is completely free and open-sourced on GitHub so you’re free to download and mess with any of the codes.
These icons don’t have any CSS dependencies or need any special browser features. At first glance, it may seem like the icons are built on SVGs but they’re actually just divs.
Through the magic of CSS, you can build custom line icons for common interface elements such as the hamburger menu, the three-dot icon or the print icon (among many others).
You can choose between thin line icons or dark filled icons. They both utilize similar CSS properties and you can even see what they are by clicking any icon in the list. You’ll see a sliding sidebar with the HTML and CSS code along with the icon enlarged.
If you look towards the top-right corner of the code fields you’ll see a little copy icon. Click that to automatically copy the code to your clipboard. Oh, and that copy icon? Also built with Wenting’s pure CSS code.
To change the color of any icon, just find the
color property in the main icon class. Updating that one
color property will change everything else, too.
Since these icons are pretty simple, they probably won’t work for every website. But this is a cool alternative to images or icon fonts and it’s completely free.