I’m not sure what to call these icons from Astrit Malsija. The title is “500+ CSS Icons, Customizable, Retina Ready & API” and the URL is “css.gg” but they aren’t really named anything.
Anyway, their shtick is:
The 🌎’s first icon library designed by code.
The idea is that they don’t use clip-path, they aren’t icon fonts, they aren’t even SVG. They are just <i> tags essentially using the shapes of CSS and pseudo elements as necessary to draw themselves. It’s a very clever approach. They’ll render super fast, like inline SVG would, because they don’t require any other resource. They don’t scale particularly well because everything is sized in px, but they have modifier classes for a handful of predefined sizes. I probably wouldn’t use these in production (inline SVG is the way to go), but still, it’s clever.
I wouldn’t call it the world’s first either. Nicolas Gallagher designed an icon set like this 10 years ago (!).
Looks like they only come in one size and can’t be resized?
Looks like there is a little sizing thing. 4 set sizes.
In order to resize it you just add any value to the class or icon directly, I am using custom variables for that.
The sizing works with transform and the fallback is 1 or the actual size.
Seems like scaling it could have been handled pretty easily by setting the font size of their container to 10px and then their sizing could have been handled with ems. Just change the base size with your stylesheet and you’re gucci, no?
Count me in with the people who said this could be done with em units (the default is usually 1rem = 16px, and if it’s different you probably want it to scale up with the text in this case).
That said, I find that the most useful part of these icon collections are the underlying techniques used. You never know when something you learned can come in handy.