I recently stumbled upon a collection of amazing icons “drawn” with nothing more than CSS! Visit css.gg and browse through 700+ incredible icons created (coded) by Astrit.
Pure CSS!
On my site, I use CSS for simple icons like drop down arrows - and that was hard enough (I did them myself without reference).
So, of course css.gg was intriguing and I immediately looked at the CSS behind some of the icons at- it’s unbelievable that a combination of ::before and ::after with clever use of borders, shadows, and gradients can create so many shapes.
How is it even possible that CSS can create a bot shape?
.gg-bot {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--ggs,1));
width: 21px;
height: 10px;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
border-bottom: 1px solid transparent;
border-radius: 12px;
box-shadow:
0 0 0 2px,
-4px 0 0 -1px,
4px 0 0 -1px,
inset 0 -4px 0 -2px
}
.gg-bot::after,
.gg-bot::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 2px;
height: 2px;
box-shadow: 0 0 0 2px;
top: 3px
}
.gg-bot::before {
left: -4px;
border-radius: 3px
}
.gg-bot::after {
border-radius: 100px;
right: -4px
}If that’s not enough, there are also animated icons, which really makes full use of CSS! I love the spinners below... I might make use of them someday.
The author supports React styled components and provides the icons as component assets in Figma and Adobe XD.
Downsides
To my eyes, some icons don’t look quite right depending on the size - either a portions are blurry (e.g. dribble) or too pixelated (e.g. flag), but I am sure its due to limitations of CSS rather than the fault of the designer. The icons are also available in SVG and other formats, perhaps those look better, but I didn’t compare.
As flexible as CSS is, it still feels like a hack. SVGs are still preferable - its fit-for-purpose, more understandable and compact (if proper primitives and sensible dimensions are used, as opposed to exclusive use of paths and floating point coordinates). Also HTML allows SVG as background images and SVG is less likely to be impacted by CSS formatting.
Still, cc.gg is superb work!