css.gg - Launch on Product Hunt - 500+ CSS-only icons w/ API & NPM

Hello everyone,

Today we are launching css.gg on Product Hunt

Hello everyone

I have just published my project on Product Hunt

css.gg is a set of minimalistic looking icons, customizable and easy to use.

The entire library is built in CSS making it ideal for those who focus on ⚡️ performing website since they render very fast, among other features you can compile just how you would do with the rest of the style.

🥂 css.gg is entirely free and it will be forever.

🛠 For those wish to integrate it in their app there are API endpoints available with all icon details including style, markup and even views and API calls.

📖 For those who wish to learn and preview you have each icon on a single page and you can preview the CSS directly to learn how it was built

🚀 Performance is just unpar with other options since it is entirely CSS, you can apply the style to any class and they are designed to stand alone without breaking your layout.

📏Scalability is not an issue , all icons are Retina Ready by default, designed by code makes it possible to have any size you like as regular icon or perhaps backdrop. Scaling works as magic with a single CSS variable "--ggs"

Thank you to everyone who did support this project so far, and I am overwhelmed with the feedback I got, only on github 70+ stars on the first day.

Any one who needs personal demo please reach out.


<i class="gg-icon-name"></i>


 <!-- Uncompressed - Single Icon -->
<link href='https://css.gg/icon-name.css' rel='stylesheet'>

<!-- Compressed - Single Icon -->
<link href='https://css.gg/c?=|icon-name' rel='stylesheet'>

<!-- Multiple icons  -->
<link href='https://css.gg/c?=|icon-name|icon-name|icon-name' rel='stylesheet'>

<!-- All icons  -->
<link href='https://css.gg/c' rel='stylesheet'>


/* Uncompressed - Single icon */
[@import](/import) url('https://css.gg/icon-name.css');

/* Compressed - Single icon*/
[@import](/import) url('https://css.gg/c?=|icon-name');

/* Multiple icons */
[@import](/import) url('https://css.gg/c?=|icon-name|icon-name|icon-name');

/* All icons */
[@import](/import) url('https://css.gg/c');

API reference

All data - Single Icon


All data - Multiple Icon


Return style & markup only

You need to specify in the end of url if you wish to pull only style or markup by using &op=css or &op=css+markup variables respectively.

How to resize an icon

/* To resize an icon you just need to change the number of a css variable "--ggs" to any number 
you like if not specified it falls back to 1 or the actual size. */
.gg-icon-name {
    /* This value will multiple the actual size  */
    --ggs: 10;

/* The variable can be added to the parent,
custom class,body or root level if you want all icons same size. */
:root {
    --ggs: 6;

CDN Alternatives




NPM Package


Thanks to everyone for the support.

Trending on Indie Hackers
✨ Let's hack Twitter ✨ 70 comments My SEO experience 18 comments How do you login users on you site? 9 comments Why I started following back everyone 8 comments How do I not quit? 5 comments 200 early user signups for Beta 2 comments