500 CSS Icons - css.gg

Hello everyone

I have just published my project on Product Hunt
https://www.producthunt.com/posts/css-gg/

If you find it interesting please consider upvoting.

Site: View site directly

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.

Markup

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

Style

 <!-- 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'>

@import

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

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

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

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

API reference

All data - Single Icon

https://css.gg/json?=|icon-name

All data - Multiple Icon

https://css.gg/json?=|icon-name|icon-name|icon-name

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

JSON
https://unpkg.com/css.gg
https://cdn.jsdelivr.net/npm/css.gg

CSS
https://unpkg.com/css.gg/icons-compressed/icons.css
https://cdn.jsdelivr.net/npm/css.gg/icons-compressed/icons.css

XML
https://unpkg.com/css.gg/icons-xml/icons.xml
https://cdn.jsdelivr.net/npm/css.gg/icons-xml/icons.xml

NPM Package

https://www.npmjs.com/package/css.gg

Github repo

astrit / css.gg

700+ Pure CSS, SVG & Figma UI Icons, 6000+ glyphs, patterns, colors and layouts.

CSS＊GG

A comprehensive, open-source CSS icons library.
Featuring Vanilla CSS, SVG and Figma UI icons

Now also a collection of well organised 6000 Unique Glyphs,
easy copy paste and available on the raycast extension.

Update 2024-08-26

The new version is live on the website, with a new design and a new way to browse the icons.
Soon to be released as a Figma plugin and the new version of the library.

Other resources: YouTube, Figma, Raycast, GLYF＊APP