# Gallery Of Pure CSS Icons Is What All Frontend Developers Wants

**URL:** <https://onehack.st/t/gallery-of-pure-css-icons-is-what-all-frontend-developers-wants/170780>\
**Category:** Tutorials & Methods\
**Tags:** tools, tips-tricks\
**Created:** [January 25, 2021, 1:48am UTC](https://onehack.st/t/gallery-of-pure-css-icons-is-what-all-frontend-developers-wants/170780 "2021-01-25T01:48:34Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![NoBody](https://onehack.st/user_avatar/onehack.st/nobody/32/163880_2.png) [@NoBody](https://onehack.st/u/NoBody)\
**Post date:** [January 25, 2021, 1:48am UTC](https://onehack.st/t/gallery-of-pure-css-icons-is-what-all-frontend-developers-wants/170780/1 "2021-01-25T01:48:34Z")

</div>

Adobe designer Wenting Zhang created an **[interesting web app](http://cssicon.space/)** 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](https://github.com/wentin/cssicon)** so you’re free to download and mess with any of the codes.

 ![image](https://onehack.st/uploads/default/original/3X/d/c/dc6b2388286f3980706665ba48e97ab3c47303e6.png)

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.

 ![image](https://onehack.st/uploads/default/original/3X/a/2/a2cff142aab08dd806013d7b1e08e96eeed51977.png)

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](http://cssicon.space/)** to **see more examples** and to **copy/edit the source**. You can also **test each icon separately** [in CodePen](http://codepen.io/pen?&editors=110) if you wanna **toy around with the source** in your browser.

`Source: hongkiat`

**Happy learning!**