css.gg

Open source

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

Become a contributor

Financial contributions

Custom contribution

Donation

Make a custom one time or recurring contribution.
Recurring contribution

backer

Become a backer for $5.00 per month and help us sustain our activities!

Starts at

$5 USD / month

1 individual has contributed

Recurring contribution

sponsor

Become a sponsor for $100.00 per month and help us sustain our activities!

Starts at

$100 USD / month

Top financial contributors

1
Darko Blažič

$70 USD since Feb 2020

Budget

See how money openly circulates through css.gg. All contributions and all expenses are published in our transparent public ledger. Learn who is donating, how much, where is that money going, submit expenses, get reimbursed and more!

Monthly financial contribution to css.gg (backer)

from Darko Blažič9/1/2020

+$10.00USD
Completed

Monthly financial contribution to css.gg (backer)

from Darko Blažič8/1/2020

+$10.00USD
Completed

Monthly financial contribution to css.gg (backer)

from Darko Blažič7/1/2020

+$10.00USD
Completed

Today’s balance

$58.17 USD

Estimated annual budget

~ $99.72 USD

css.gg is all of us

Our contributors 2

Everyone who has supported css.gg. Individuals and organizations that believe in –and take ownership of– our purpose.

Astrit
Admin
Darko Blažič
Financial Contributor

Total contributions

$70 USD

backer

About


css.gg

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


Features

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

Getting started

Access all the icons as package:

NameSourceCLI | npm i -S css.gg
CSS | https://css.gg/c
JSON | https://css.gg/json
XML | https://css.gg/xml


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.

Support

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