DEV Community

loading...
Cover image for Favorite Resource of the Week: css.gg

Favorite Resource of the Week: css.gg

lukekyl profile image Kyle Luke ・2 min read

In the world of software development, things move fast. New tools, new libraries, new languages! As technology changes to meet the needs of today's problems, it is important as a developer to keep up to date with what tools work best for you. I am always watching for tools that will help improve my workflow, making me a better designer and developer, and making my work more effective. I would like to share the tools I find that seem to make a difference in my work, and might just help solve some of the problems you are facing in your own!

This week my favorite resource is a newly found library of well designed, open-source, and widely available icons built originally in CSS: css.gg icon library. This icon library is awesome, and widely available in a ton of formats, from downloading an using individually or as a set, to opening in design applications such as Figma or Adobe XD, or even importing the NPM module into your React project.

css.gg Icon Library

https://css.gg/
Image of the css.gg Web App

When it comes to icon libraries, there a lot of options to choose between. So, what makes css.gg icons special? Well first on the list is that it's open-source and caught the attention of a few designers and developers alike that helped increase the number of icons available for use, along with improving the platform availability. css.gg was created by Astrid Malsija (also a member of the DEV community!), as a personal project which he made open source. Any it's growing, now including over 700 retina-ready, scalable, and incredibly simple icons, along with being available now as an API for HTML/CSS import, as styled-components, as React NPM imports, and as SVG Sprites. The icons were originally built using pure CSS, which renders them incredibly quickly because it doesn't require any additional resource. The other super cool thing about them being built in CSS, is that they allow for animations (see this Loadbar for example)! If you view any of the icons individually, you can see the CSS code that was used to build each icon. There is also a very friendly GitHub ReadMe that explains how to import and use the icons across all of the available formats.

Because of css.gg icon libraries' open source friendliness to improve the icons, their quick rendering and scalability, and wide availability in multiple formats, this has become my new favorite icon library for use in my projects, and a great new addition to my development toolbox. I hope you find it useful in your own!

What is your favorite icon library, and why do you find that tool to be the most effective for your daily work use?

Discussion (0)

pic
Editor guide