DEV Community

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

Posted on • Updated on

500 CSS Icons - css.gg

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>
Enter fullscreen mode Exit fullscreen mode

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'>
Enter fullscreen mode Exit fullscreen mode

@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');
Enter fullscreen mode Exit fullscreen mode

API reference

All data - Single Icon

https://css.gg/json?=|icon-name
Enter fullscreen mode Exit fullscreen mode

All data - Multiple Icon

https://css.gg/json?=|icon-name|icon-name|icon-name
Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

NPM Package

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

Github repo

GitHub logo astrit / css.gg

700+ Pure CSS, SVG & Figma UI Icons, 6000+ glyphs, patterns, colors and layouts.

A comprehensive, open-source CSS icons library.
Featuring Vanilla CSS, SVG and Figma UI icons

Now also a collection of well organised 6000 Unique Glyphs,
easy copy paste and available on the raycast extension.

Update 2024-08-26

The new version is live on the website, with a new design and a new way to browse the icons.
Soon to be released as a Figma plugin and the new version of the library.


Other resources: YouTube, Figma, Raycast, GLYF*APP


npm GitHub last commit Website npm GitHub issues GitHub stars Twitter Follow

css.gg


Support

If you want to support further development of this project consider becoming a sponsor




Thanks to everyone for the support.
Astrit

Top comments (11)

Collapse
 
jluterek profile image
James Luterek

I was excited to try this in a project only to realize there is no STAR. :-(

Collapse
 
astrit profile image
Astrit

Yeah the star is close to impossible to do on Pure CSS and on a single div.
I would invite you to get one from Feather feathericons.com/?query=star

Collapse
 
w3hubs profile image
w3hubs.com

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

Collapse
 
astrit profile image
Astrit

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

Collapse
 
w3hubs profile image
w3hubs.com

ya sure sir i will :))

Collapse
 
athul7744 profile image
Athul Anil Kumar

Hi, can I use css.gg in nodejs?

Collapse
 
astrit profile image
Astrit

Sure you can check here:
github.com/astrit/css.gg

Collapse
 
athul7744 profile image
Athul Anil Kumar

I'll check it out. Thank You

Collapse
 
gcnu profile image
seenu

your license is confusing,
it says MIT in github

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

Collapse
 
astrit profile image
Astrit

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.

Collapse
 
tatsin profile image
yassine mahjoubi

superbe WORK : ) is there a way to import a collection inside a file sass ?
i tried in my main.scss :
@import "~css.gg/icons/scss?= {airplane} | {add}";
thank you !