Skip to content
500+ CSS Icons. Customizable, Retina Ready with API & NPM
CSS Other
  1. CSS 99.3%
  2. Other 0.7%
Branch: master
Clone or download

README.md

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

css.gg GitHub package.json version npm GitHub last commit Website npm GitHub issues GitHub stars

css.gg

Features

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

Getting started

Access all the icons as package:

Name Source
CLI 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.

Donate

Source Link
Github Sponsor https://github.com/sponsors/astrit
Open Collective https://opencollective.com/css-gg

This project is sponsored by

SponsoredBy.dev

Support

  1. FAQ - https://css.gg/faq
  2. Discord - https://discord.gg/e7NDKFM
  3. Spectrum - https://spectrum.chat/css-gg
You can’t perform that action at this time.