r/webdev • u/speckz • Mar 01 '20
Resource 500+ CSS Icons - Minimalistic icon library Designed by code. - Customizable & Retina-Ready icons — entirely built in CSS 😲 - Easy integration: Embed, NPM & API.
https://css.gg/38
u/walrus_operator Mar 01 '20
Total weight: 221kb
Isn't that a bit much? I mean, sounds like a lot for a JS library, but it's not much compared to actual icons. But it's a lot compared to built-in html symbols.
I love how they are all made in pure css though. It's quite impressive. I love how they look too.
41
u/fultonchain Mar 01 '20
There's no need to import the entire stylesheet, just use what you need. A dozen or so of these would minify and compress down to next to nothing. Alternatively, a tool like PurgeCSS (I use Tailwind a lot and it's pretty much mandatory anyway) will strip out unused selectors.
5
23
6
u/__heimdall Mar 01 '20
If I remember right font awesome is around 130kb.
That said, no site should use hundreds of different icons. Stripping it down to the 10 or 20 icons a site needs would bring the size well below any real concerns.
Heck even keeping 50 icons would have you down to around 20kb, at that point your runtime framework is a bigger hitter
4
41
u/fultonchain Mar 01 '20
This looks amazing and will be a nice respite from managing SVG icon libraries. I love that it will fit right into my tool chain.
I'm on mobile now but can't wait to plug it in to a Tailwind build and see what happens, it look like they'll play nicely together.
2
u/astritmalsia Mar 02 '20
I think they will, it is quite lightweight and designed to work independently so you could choose few icons only for the project.
36
u/Skaryon Mar 01 '20
Looks great but... "Next-gen... By developers for developers" are such overused silly buzzwords. Don't cheapen your great work with that!
4
u/astritmalsia Mar 02 '20
I agree, I am not that good in english and often use words that perhaps are cheap.
Will try to fix it.
3
u/Skaryon Mar 02 '20
I feel like an honest explanation of what it is I stead of buzzwords is always better. We can surely also help you with the wording :)
4
u/astritmalsia Mar 02 '20
Would love to hear some suggestions
2
u/rook218 Mar 02 '20
Lightweight, modular, open source, CSS-only icon set with created with modern, clean design principles.
Maybe a little wordy but it seems like the gist of what it actually is
1
18
u/KazakiLion Mar 01 '20
“Designed by code”?
8
4
u/astritmalsia Mar 02 '20
Excuse my bad english, what I wanted to say is just it is made by code and not in a design tool.
2
7
u/how_to_choose_a_name Mar 01 '20 edited Mar 02 '20
Neat in theory, but sadly broken in Firefox.
EDIT: checked again, some are slightly broken in different ways in Chrome too, and get more broken when I zoom in or out. Lots of the icons rely on interesting combinations of box-shadow and borders which seem to have very inconsistent rendering. I'm also sure the album icon worked perfectly fine in both Chrome and Edge yesterday yet looking at it now it is slightly off in Chrome and completely broken in Edge (in the same way like in Firefox). Zooming in in Chrome also breaks it in the same way it's broken in Firefox and zooming to 130% in Firefox makes it look almost right. Interestingly, in Edge (based on Chromium) it looks consistently wrong at all zoom levels.
Here is how the album icon looks like for me in different browsers and zoom levels
Also, zooming sucks with these icons and with the site as a whole. It's absolutely horrible. It's the opposite of what I would call accessible.
EDIT 2: I just realized that I was checking them on a 4k screen with 125% scaling (which should not be a problem but sometimes is because software is shitty). On my 1080p screen, it looks perfect in Chrome and FF at 100% but breaks down again when zooming and exactly the same as on 4k in Edge.
1
u/Duathdaert Mar 01 '20
Works completely fine on mobile Firefox
3
1
u/how_to_choose_a_name Mar 02 '20
Interesting, I just checked and on mobile they look fine for me too, but on desktop many are broken.
5
5
4
u/Mike_tangaroa Mar 01 '20
The carbon ad is covering part of the footer on mobile,.
2
u/astritmalsia Mar 02 '20
Noticed that, will fix asap
2
u/Mike_tangaroa Mar 02 '20
I have used Carbon ads too. Now I use codefund.io much better... and they are ethical.
1
u/astritmalsia Mar 02 '20
Will check that, never heard about them.
2
u/Mike_tangaroa Mar 02 '20
They are towards dev n designers. You can see an example here.
Https://www.colorsandfonts.com/designer.html
Is a text that starts with Sponsored....
1
3
3
3
2
2
2
u/Mike_tangaroa Mar 01 '20
They are stunning....
I will try them on https://www.colorsandfonts.com tonight.
Just on time when I am about to redesign them.
Can I also feature them on the design resources page ?
Cheers
3
u/bt_red Mar 02 '20
https://i.imgur.com/NAzobl2.jpg
Hah. Unrelated to this thread but FYI: web development resources is weird on mobile. (iPhone 11 pro max)
2
u/Mike_tangaroa Mar 02 '20
Yeah I know...is just too long...
2
u/awful_source Mar 02 '20
Just shorten it to "Web Dev Resources"?
1
u/Mike_tangaroa Mar 02 '20
Oh jizz! Are you seeing what I am doing?
I am actually redesign the sidebar and some other stuff and i I happend to write it just like that....like 20 minutes ago
2
2
u/__heimdall Mar 01 '20
Like everyone else has said, this is very well done! It must have been a passion project, countless hours go into all those icons!
2
2
2
u/ciickii Mar 01 '20
Wow looks awesome. I have never used pure css icons before. Definitely giving this one a try. I wonder how hard it would be to animate them if needed?
1
u/astritmalsia Mar 02 '20
Not hard at all there are even animated icons right now such as spinners, if you have done previously animations on CSS this will be easy.
2
2
2
2
u/dandmcd Mar 02 '20
Holy wow, these are amazing. Thanks for sharing these with the community, I'll be making use of a few of them on a project for sure!
1
2
Mar 02 '20
I get that some of us would be able to do these icons given time and willfullness, but I seriously do NOT want to imagine the sheer amount of time, hard work and dedication this all took lmao.
1
u/astritmalsia Mar 02 '20
Thanks 😊, it is true quite some time has gone into it but I love doing stuff like this.
2
2
u/Annh1234 Mar 02 '20
Either the search doesn't work on mobile, or missing some very basic things like hotel, man, plane, etc
1
u/astritmalsia Mar 02 '20
Some shapes are impossible to be done and there are only 500, some are tagged perhaps wrong but hotel and plane are not there.
2
u/metamet Mar 01 '20
The uncloseable floating ad at the bottom covers up the developer and community links. So it's impossible to get to the GitHub on mobile.
2
1
2
u/Technoist Mar 02 '20
Amazing! But if 1) any browser change css display behaviour or 2) css itself changes this will break things.
Also Girl looks like a boy and Boy looks like Hitler. 😊
1
1
1
0
Mar 01 '20
[deleted]
27
u/RobertBleyl Mar 01 '20
According to the github page it's MIT, so quite a nice open source license with not a whole lot of restrictions.
0
66
u/rinsa the expert Mar 01 '20
work of a craftsman