You need help ?



Check the most common asked questions.
Join us on Discord & Spectrum.

It seems crazy to have a icon package made in CSS where there are a ton of options such as SVG, Font or PNG but this is my passion and this is the main reason why the project exists.

How ever this has it's benefits too for those crazy geeks out there.
  1. Lightweight

    Unlike inline SVG has very minimal footprint also the entire library of 500+ icons is only 220kb.

  2. Compilable

    You can compile/compress the entire library inside your project just like the rest of the style for a ultra fast website using webpack or any other bundler.

  3. Faster

    Simple as that is much faster than any other option the only thing to take in consideration is Rendering, Painting time since you will not have 500+ icons in one page that will be extremely low. Also for e.g the entire network transfer is around 50kb for this project with over 500 icons.

  4. Scalable

    These icons look crazy crisp on retina display since is code. Also you can resize them easy without braking anything around it by using the option provided.

    * Drop an eye on iPhone or Mac.

  5. Customizable

    Even tho built in CSS you can customize and animate them quite easy, they do not come out of the box animated except the load bars how ever with some basic CSS knowledge you could do some crazy transitions between icons.

  6. No Network request

    Depending on the method you can have no network request for the library everything would be inline
If you don't want to call only icons that you need but as a package do the following.
  1. CLI npm i -S css.gg
  2. CSS https://css.gg/c
  3. JSON https://css.gg/json
  4. XML https://css.gg/xml
If you want to download all icons as archive.
Including or adding to your project in done in 5 different methods such as:
  1. Standard <link href='https://css.gg/icon-name.css' rel='stylesheet'>
  2. Imported @import url('https://css.gg/icon-name.css');
  3. json https://css.gg/json?=icon-name
  4. XML https://css.gg/xml?=icon-name
  5. CLI npm i -S css.gg
The character separator is | or vertical bar e.g https://css.gg/json?=|icon-name|icon-name|icon-name in lowercase.
The url structure doesn't change depending on the input method.
Icons are basically designed with CSS which makes it possible to alter so they are very customizable, feel free to change the color, width or fill which requires basic CSS knowledge.

You can also animate the icons just be aware if the icon is using any transform value such as rotation etc.
By default the icon color is inherited from the parent with value color:currentColor; same value can be changed to any color including HEX & RGB format or RGBA with transparency. e.g color:rgba(0, 0, 0, 0.5);

In addition you can add a class to any icon and stylize that. e.g <i class="gg-code anyClass"></i>
The icon package will be available as svg in the future versions.
No they are not and the reason is you can't include directly on cloud projects as sass without a processor setup.
This is subject to change if there is a high demand for it.
All the icons can be used for free, is not required however link back to css.gg is appreciated, a link on the footer is good enough.
There is only one licence (MIT) type and that is FREE and will always be, if the icon package is going to be used for commercial purpose would appricate becoming a sponsor of the project here PayPal.

** The only reason why there is a sponsor option is to support further development of this app, there is involved a lot of work to design each icon by code also entire project is run by one person.
No! As you can see features are not based on any licence type, free or sponsor all the options are available.
Yes that is possible you just have to add the variable &op=css or if you want the style and markup &op=css+markup

e.g single iconhttps://css.gg/json?=pen&op=css+markup
e.g multiple icons https://css.gg/json?=album|add|remove&op=css+markup
There is a dedicated CSS variable which you can use to resize one icon or all of them --ggs: VALUE ; it can be the value of your choice, if not used it will fallback to 1 or the actual size.

What this actually does is use the transform propertie transform: rotate(-45deg) scale(var(--ggs,1))
The reason for that is to prevent conflict with other values e.g in this case rotate(-45deg)

The variable --ggs can be used on the parent of the icon as well to resize it.
All major browsers like Chrome, Firefox, Safari & Edge are supported.
IE is not supported, on v.11 icons render with a little bit of distortion depending on the properties.
The reson why this library has no general class to have the default styling like: box-sizing, display, color etc is that you might want to include just one icon and they are designed to be independent.

If there is a high demand for it will make it this option available on the package version.
This question might come out of curiosity but because this project started as a challange to do everything in CSS even the icon selection using content: url(); method, which btw creates a cookie without refreshing.

I made a promise to my self that I will not add any sort of javascript into the project and have only 1 network call on page load which makes this project ultrafast no matter where is hosted.

Even crazier is the fact that this project has no database and all is built with flat file including the view, download and api request count.
Yes, you can do a pull request on Github.