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
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
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)
I was excited to try this in a project only to realize there is no STAR. :-(
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
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.
ya sure sir i will :))
Hi, can I use css.gg in nodejs?
Sure you can check here:
github.com/astrit/css.gg
I'll check it out. Thank You
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.
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 !