css.gg

Open source

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

Contribute


Become a financial contributor.

Recurring contribution

Backer

Become a backer for $5.00 per month and support us

Starts at$5 USD / month

Latest activity by


Recurring contribution

Sponsor

Become a sponsor for $100.00 per month and support us

Starts at$100 USD / month

Custom contribution

Donation

Make a custom one-time or recurring contribution.

Top financial contributors

1
Darko Blažič

$150 USD since Feb 2020

css.gg is all of us

Our contributors 2

Thank you for supporting css.gg.

Astrit

Admin

Darko Blažič

Financial Contributor

Total contributions

$150 USD

backer

Budget


Transparent and open finances.

-$195.00 USD
Approved
Invoice #39872

Monthly financial contribution to css.gg (backer)

from Darko Blažič

+$10.00USD
Completed

Monthly financial contribution to css.gg (backer)

from Darko Blažič

+$10.00USD
Completed
$
Today’s balance

$124.65 USD

Total raised

$124.65 USD

Total disbursed

--.-- USD

Estimated annual budget

$99.72 USD

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

Our team

Astrit

Admin