The Material Icons set from Google is possibly the most famous icon set on the web. It's good, but it's everywhere. So alternative icons are sometimes worth exploring. In this article we'll explore my new favorite alternative icon set.

Along with maybe the Font Awesome Icon set, the Material Icons set is the first well organised and widely used icon set on the web.

Google's Material Icons are very well made and will cover most of your needs, unfortunately because they're so widely used, they're easy to spot and might end up make your website less unique.

It's actually quite hard to find good alternatives, as most websites will keep referring you to the same 5 most famous icon sets you can easily Google yourself. Which is why I want to showcase a newcomer to the race.

Why css.gg has quickly become my favorite Material Icons alternative

css.gg used to be a set of CSS-only icons. While the name doesn't hold entirely true anymore (as the icons also come in SVG and even in Styled Components form) the quality and quantity of the icons themselves is almost unprecedented for a free icon set.

Within the icon set you'll find an icon for pretty much every occasion. This includes icons for major social media platforms, the absence of which in other sets is a pet peeve of mine. Seriously, if you're making an icon set, why would you not include icons for social media?

Aside from that there's a good mix of the usual icons - including some unique ones, such as brand icons which I've not seen in any other icon set.

One of my favorite inclusions are the spinner icons, which are clean lightweight and beautiful.

Why choose css.gg over Material Icons?

The Material Icon set can be used in essentially two ways. Either download the SVG from the Material Design website, or install the Material Icons package (as well as the core Material UI package) from 'Node package manager' (npm).

Needless to say this isn't very optimal.

css.gg on the other hand can be used in a bunch of different ways.

Without npm

If you're not using Node.js you can use the icons in the following ways:

• Download or copy the single CSS from the website
• Download or copy the single SVG from the website
• Download or copy the single TSX component from the website

Right off the bat, being able to copy and paste every icon makes using the css.gg icon set much faster than many of its competitors.

With npm

css.gg also comes as a standard npm installation which includes all the methods listed above. In the same way you'd usually import components, these can be imported locally.

Extras

css.gg comes with an API as well. I'll be honest, I'm not 100% sure on how to use it, but it's interesting and definitely a unique option.

Conclusion

Having used it myself for a couple of projects, I'd say definitely check out css.gg. And it's particularly great for smaller-sized projects that only require a few icons here and there.

Astrit, the author, is also very active on Discord, where he's receptive to feedback and ways to improve the icon set. He's recently added 300 icons, which makes me very hopeful for the future of this project.