loading...
Cover image for 500 CSS Icons - css.gg

500 CSS Icons - css.gg

astrit profile image Astrit Updated on ・3 min read

Hello everyone

I have just published my project on Product Hunt
https://www.producthunt.com/posts/css-gg/

If you find it interesting please consider upvoting.

Site: View site directly

--

css.gg is a set of minimalistic looking icons, customizable and easy to use.

The entire library is built in CSS making it ideal for those who focus on ⚡️ performing website since they render very fast, among other features you can compile just how you would do with the rest of the style.

🥂 css.gg is entirely free and it will be forever.

🛠 For those wish to integrate it in their app there are API endpoints available with all icon details including style, markup and even views and API calls.

📖 For those who wish to learn and preview you have each icon on a single page and you can preview the CSS directly to learn how it was built

🚀 Performance is just unpar with other options since it is entirely CSS, you can apply the style to any class and they are designed to stand alone without breaking your layout.

📏Scalability is not an issue , all icons are Retina Ready by default, designed by code makes it possible to have any size you like as regular icon or perhaps backdrop. Scaling works as magic with a single CSS variable "--ggs"

Thank you to everyone who did support this project so far, and I am overwhelmed with the feedback I got, only on github 70+ stars on the first day.

Any one who needs personal demo please reach out.

Markup

<i class="gg-icon-name"></i>

Style

 <!-- 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'>

@import

/* 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

All data - Single Icon

https://css.gg/json?=|icon-name

All data - Multiple Icon

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.

How to resize an icon

/* To resize an icon you just need to change the number of a css variable "--ggs" to any number 
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;
}

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

NPM Package

https://www.npmjs.com/package/css.gg

Github repo

GitHub logo astrit / css.gg

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

css.gg

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

App: https://css.gg

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…

Thanks to everyone for the support.
Astrit

Posted on Dec 19 '19 by:

astrit profile

Astrit

@astrit

Front-end Developer, creator of https://css.gg

Discussion

markdown guide
 

ya thank you so much we will try this icons in our projects or any elements. once again thanx :))

 

My pleasure, glad to know you like it, if you need personal demo let me know and will do it.

 
 
 

your license is confusing,
it says MIT in github

but in your website, you expect a link back or $10.

 

Read the description carefully, the source is available from github as well all open.

css.gg/faq
Can I use icons for free - read this.
Or what license do I need

If you choose to support the project but not required otherwise would not make the source nor the API public full access for every one.