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

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: http://www.hongkiat.com/blog/pure-css-icons-gallery/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s