This Gallery of Pure CSS Icons is What All Frontend Developers Want

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.

css iconscss icons

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.

pure css icon gallerypure css icon gallery

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.

Check out the CSS Icon home page to see more examples and to copy/edit the source. You can also test each icon separately in CodePen if you wanna toy around with the source in your browser.

Create Your Own Font Icon Set Easily With Fontello

.no-js #ref-block-post-20027 .ref-block__thumbnail { background-image: url(“http://media02.hongkiat.com/thumbs/250×160/create-font-icon-set.jpg”); }

Create Your Own Font Icon Set Easily With Fontello

We can see that Font Icons are widely used across websites, and for good reason. The Font Icon…Read more

Source: Hongkiat

(1071 Posts)

Leave a Reply