CSS Icon: A icons set made with just CSS

Pure CSS Icon

Icons are now an integral part of web design but there’s an issue. If you use an icon set, you have to import an external font file and a large CSS file. So, it affects load time. This is the reason most web designers always look for lightweight icons set. To solve this issue, Adobe designer Wenting Zhang has created a set of pure CSS icons. He simply named it “CSS Icon.” He has also developed a web app for getting the CSS code of these icons.

This project is completely free and open-source. So, you can freely download and use any of the codes. You can also work on the project if you think you can add more pure CSS icons.

Check the featured image to see all the icons available in this CSS icon set.

The most notable thing about these icons is that there is no CSS dependencies. So, you don’t need to import any external file for using any of the icons. Even if these icons feel like SVGs but they are actually HTML Div decorated by CSS only.

Visit the official website and check all the available icons. Click on any of the icons and it will open the HTML and CSS code for the icon on the right side.

Add HTML code where you want to show the icon and CSS code in the header of the web page. You can also change the color of these icons by changing the color property in the main icon class.

Now when Google is pushing core web vitals, it is really important to make a web design that depends less on external resources. You should avoid importing fonts and script files as much as possible. I really liked this icon set and will surely use them in my next web design.


Tags: |

Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.

Similar Articles


Leave a comment

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

2020 UseThisTip | Part of Techlomedia Internet Pvt Ltd Developed By Deepanker