500+ CSS Icons. Customizable, Retina Ready with API & NPM

css.gg

Minimalistic Icon library Designed by code.
Customizable & Retina-Ready icons entirely built in CSS.

Demo: https://css.gg ― Twitter: https://twitter.com/AstritMalsija ― Donate: https://github.com/sponsors/astrit

Features

1. API endpoint
2. Lightweight
3. Accessible
4. Agile
5. Retina Ready
6. Compilable

Getting started

Access all the icons as package:

This package 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

Add icons in your project

1. Markup

The class name starts always with “gg-” followed by icon name.

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

Resizing

To resize an icon you just need to change the value of a css variable “–ggs” to any value 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;

}

2. Style

HTML

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

CSS

/* 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

1. Access data on .json format

All data - Single Icon

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

All data - Multiple Icons

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.

e.g Single Icon

Style

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

Style & Markup

https://css.gg/json?=|icon-name&op=css+markup

e.g Multiple Icons

Style

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

Style & Markup

https://css.gg/json?=|icon-name|icon-name|icon-name&op=css+markup

2. Access data on .xml format

All the above options apply to xml format.

Donate

This project is sponsored by

Support

1. FAQ - https://css.gg/faq
2. Discord - https://discord.gg/e7NDKFM
3. Spectrum - https://spectrum.chat/css-gg