Skip to content
500+ CSS Icons. Customizable, Retina Ready with API & NPM
CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Create FUNDING.yml Jan 6, 2020
icons-compressed v1.0.6 - Dribbble new gradient syntax fix Jan 15, 2020
icons-json v1.0.6 - Dribbble new gradient syntax fix Jan 15, 2020
icons-scss v1.0.6 - Dribbble new gradient syntax fix Jan 15, 2020
icons-xml v1.0.6 - Dribbble new gradient syntax fix Jan 15, 2020
icons v1.0.6 - Dribbble new gradient syntax fix Jan 15, 2020
CHANGELOG.md v1.0.6 - Dribbble new gradient syntax fix Jan 15, 2020
CODE_OF_CONDUCT.md Update CODE_OF_CONDUCT.md Nov 15, 2019
LICENSE Add licence Nov 12, 2019
README.md Add donate on top Mar 5, 2020
package.json v1.0.6 - Dribbble new gradient syntax fix Jan 15, 2020

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.