
Show HN: CSS ICON, an icon set crafted by pure CSS - wentin
http://cssicon.space/#/icon/S
======
_puk
Not sure about the smileys, but the functional icons are pretty neat, thanks
for sharing.

Slightly OT, but the codepen highlighting of the various steps taken is
incredibly intuitive, and does a great job of visualising how these icons are
built up.

However, it does highlight (for me personally), the abuse of the before and
after pseudo elements; Essentially it is giving you three layers, great. Want
4, add another sub-element in your html (<i>) and you get three more.

Whilst a neat trick, how this is better than having a contained icon in say
SVG?

~~~
lucasmullens
IE8 doesn't support SVG, which might matter for some websites

~~~
caub
ie8 memorial site mostly

------
amelius
Why not just use SVG inside a data url? E.g., as in [1].

[1]
[https://en.wikipedia.org/wiki/Data_URI_scheme#Examples](https://en.wikipedia.org/wiki/Data_URI_scheme#Examples)

~~~
wentin
css icon has less code, the code is more editable and managable, argumentably
better performance (because i haven't tested it)

in the intro youtube video I said more about that. But to be honest, I just
had a lot of fun dealing with the constraints that comes with css and loved
the creating process, I spent a few weekends keeping designing and coding
those tiny icons and skipped a lot of sleeping and still had fun.

~~~
sly010
> css icon has less code

this is just not true. using svg you can have a single string describe an
arbitrarily complex path.

> the code is more editable

also not true. they are both just text...

> and managable

how so? in svg you can group things, easily shuffle things around, save them
in separate files and point to them.

> argumentably better performance (because i haven't tested it)

what does that even mean? loading time? rendering time? memory?

Congratulations, there is some pretty cool wizardry going on in there, and
it's undoubtedly fun, I just find your rationale for it completely made up.
You still got my upvote though, just please don't say such unsubstantiated
silly things.

edit:formatting

~~~
wentin
> css icon has less code

this is just not true. using svg you can have a single string describe an
arbitrarily complex path.

reply: unless you count code by lines, but that single line of string for
paths feels really really long and not readable. see below

> the code is more editable

<svg id="beard" data-name="beard 1"
xmlns="[http://www.w3.org/2000/svg"](http://www.w3.org/2000/svg")
width="14.096" height="4.063" viewBox="0 0 14.096
4.063"><title>Untitled-1</title><path
d="M10.529,0.563a2.245,2.245,0,0,0-2.972,0,1.806,1.806,0,0,0,0,2.716c1.8,1.643,4.343.514,6.539-1.63C13.461,2.269,12.136,2.032,10.529.563Z"
fill="#fff"/><path
d="M3.567,0.563a2.245,2.245,0,0,1,2.972,0,1.806,1.806,0,0,1,0,2.716C4.741,4.922,2.2,3.793,0,1.649,0.635,2.269,1.959,2.032,3.567.563Z"
fill="#fff"/></svg> vs. in css [http://cssicon.space/#/icon/mustache-
solid](http://cssicon.space/#/icon/mustache-solid)

to change its shape you need to use illustrator for SVG vs. in css just some
property change. Yes they are just text, but are you really smart enough to
edit the above SVG code by hand?

> and managable

managable as you can have clean html, all you need is a div, vs. svg you have
to insert the whole chunk of svg code in your html.(Using <img/> won't give
you flexibility, svg has to be inline) you can have package tool to insert svg
programmatically but when you just prototyping, not gonna do that whole
process to just get some icon showing up. CSS ICON is grab and go icons.

> arguably better performance (because i haven't tested it)

It is not true rendering time wise, as someone else analyzed CSS need more
rendering time. But you have less HTTP request comparing to icon fonts or
external SVG files. Download time is faster

------
zhan_eg
Well, for me on Firefox 50.0b6, Chrome 54 and IE 11 on Win 8.1 the previews
look the same, but then there are some differences when you check a specific
one - for example the smiley has an upper lip on Firefox -
[http://cssicon.space/#/icon/smiley](http://cssicon.space/#/icon/smiley) :)
[http://i.imgur.com/XlqKPhW.png](http://i.imgur.com/XlqKPhW.png).

Still the idea is very cool, you can basicly do anything with CSS (if anyone
is interested check [https://cssquests.com/](https://cssquests.com/) , the
name is self-explanatory :)

From a performance perspective, how do those compare to using SVG icons?

~~~
wentin
oh yeah! thanks! this is fixable, I just have to draw it in a different way,
logging a bug.

I haven't tested it but I am guessing it has better rendering time, it has
much less code than SVG (with their path, it is often quite long) and you can
style it (such for hover state) and animate it more easily.

With SVG, you can do the same, but it has to be inline in HTML, no img tag
embed SVG and such, so if you have 2 of the same icons on the same page, the
code has be to repeatedly inserted twice in the html, but with css it just
share the same classname.

------
MOARDONGZPLZ
Wow! I'm not really a front end person who works with this kind of stuff, so I
don't know the real use case of this versus something else.

But: I went through a lot of the simpler ones on the codepen (minus, plus,
menu, etc.) and learned some awesome techniques that I didn't know, then
recreated them from scratch and was able to create some of the more
complicated things. tbh I probably learned more css in the last hour than in
any other single hour of my life. Nice!

I present: crudely drawn "x" icon with a circle around it:

[http://codepen.io/mdp123/pen/vXzbYb](http://codepen.io/mdp123/pen/vXzbYb)

~~~
wentin
this made my day! like what I said in the video, I struggled finding use case
of it for other people, and decided to spend more time than what I spent on
crafting these icons to make this an educational web app with angularjs. I am
very glad it is doing what I want it to do. I recorded these tutorials long
time ago and never posted it anywhere, i think maybe this will interest you
[https://www.youtube.com/watch?v=TNCngP8w284](https://www.youtube.com/watch?v=TNCngP8w284)
[https://www.youtube.com/watch?v=go3P1Op9tF8](https://www.youtube.com/watch?v=go3P1Op9tF8)
[https://www.youtube.com/watch?v=EuO21HanS6k](https://www.youtube.com/watch?v=EuO21HanS6k)

~~~
MOARDONGZPLZ
This is great, thanks! Love the sun icon.

------
bhouston
What is cheaper CPU and download wise? CSS icons or font icons.

~~~
Retr0spectrum
RE dowload size, I guess it depends entirely on how many you plan to use.
Downloading an entire font to use a single icon would be inefficient compared
to a few lines of CSS.

~~~
cuu508
You can use e.g. icomoon.io to build tailored icon font files

------
EdSharkey
What you did with that border radius on the mustache icon is so slick! I had
no idea the border-radius could be made to curl up beyond the top of the shape
like that. And then making mirrored circles out of a box-shadow, that is tidy!

I tip my hat and raise a glass to you, you're a great artist.

~~~
wentin
awww, thanks so much for you nice words!

------
OJFord
Assuming I can find an equivalently desirable icon here, in font awesome, or
an SVG; which should I prefer?

~~~
wentin
CSS ICON is good for cases like, if you want to animate it, or style it on
hover state in a particular way, of you need to prototype something fast on
codepen where you don't want external assets files or long long pasted-in SVG
code, this is much better.

The shortcoming is that you can't do any icon in the world with css. But if
you already find this is equivalently appearance wise, the performance and
code hygiene is much better than SVG or icon fonts.

also icon fonts are the worst way to do icon, here is the article about why:
[https://github.com/blog/2112-delivering-octicons-with-
svg](https://github.com/blog/2112-delivering-octicons-with-svg)

------
myfonj
Really nice execution!

I remember seeing similar projects [1][2] in the past and pondered usage of
the `currentColor`.

Btw, there are several occurrences of white components [4]; they are necessary
for "breaking" lines, but surprisingly there are very few of them and overall
do't break much [3].

[1] [http://cikonss.zzapdeveloped.it/](http://cikonss.zzapdeveloped.it/) [2]
[http://one-div.com/](http://one-div.com/) (warning, hugely ad infested
currently) [3] console:
document.styleSheets[0].insertRule('.iconWrapper,.iconViewer{background-color:
#999 !important}',0)

~~~
RubyPinch
its mostly pretty avoidable, border-image with a gradient solves it a majority
of the time

~~~
wentin
can you say more about this approach? very curious

~~~
RubyPinch
[https://codepen.io/anon/pen/xEykRg?editors=1100](https://codepen.io/anon/pen/xEykRg?editors=1100)
in retrospect probably not a complete solution in of itself, but if doing the
top 3 borders, with a :after with a gradient background image, should work for
all colors

------
brudgers
My concern is the burden this seems to place on hardware. By which I mean that
loading the page into my browser (Firefox) and letting it sit for a minute
spun up my laptop fan to an audible level and warmed one of my quadriceps.

~~~
hughes
_Something_ on that page is definitely gobbling up CPU. I barely get 10fps
when scrolling.

~~~
wentin
this sucks! I am trying to figure out why, could be the angular app's
performance?

------
qz_
This looks very cool, but why would you use this instead of using svg?

------
MattBearman
Very cool! I'd never seen the `currentColor` option for borders, great to
learn about that.

Some of the icons don't look great at the small size, particularly the smilies
(Chrome 53 on OS X)

~~~
whatupdave
Here's a helpful video on the topic:
[https://www.youtube.com/watch?v=krbKkLPXwlQ](https://www.youtube.com/watch?v=krbKkLPXwlQ)

------
phkahler
Isn't that what SVG was supposed to be for?

~~~
jdauriemma
All other things being equal, pure CSS could be a superior alternative to SVG
/ font icon if your SVG / font icons are loaded via HTTP (this is usually the
case with SVG and always the case with font icons). Reducing the number of
requests is associated with better performance and user experience.

~~~
oftenwrong
You can avoid the separate request by inlining the SVG or using a data URI

~~~
phkahler
I haven't done web stuff in 15+ years. Isn't there the equivalent of a
compiler to produce a more static page, which would handle things like putting
SVGs inline? Or the ability to create a library (like CSS) where there would
only be a single reference to all the reusable components of a page, which may
in turn be "compiled" from individual source files?

~~~
jdauriemma
I think the webpack ecosystem has a lot of plugins for inlining.

------
mjurczyk
Amazing work, love how you managed to create so many variations from 3 sub-
elements!

------
kalleboo
Great job on these! Looking at the code also taught me about CSS currentColor.

Web technologies are funny though; Instead of a decent video solution, we get
animated GIFs. Instead of a decent vector solution, we get CSS icons...

------
nik736
Very cool, good job! But what's the use-case?

~~~
wentin
i struggled a lot finding use case for everyone. I talked about that in the
video. The short version is, less code, more manageable, you can style it and
animate it easily, while it is not as powerful as SVG. And it is a good start
point to learn CSS

------
BillyKelly
I like clicking on a class and selecting the item. Good job. On Opera
40.0.2308.81 work and Chrome 54 good work.

------
baby
Why not the character "+" instead of tracing two vertical/horizontal bars?

~~~
wentin
there are design cases like, I want to make everything minimalistic, so
everything should be consistent of 1px stroke weight, then i need to have a
special + sign drawn :) Designers are this this. like developer has to indent
2 spaces instead of 4 or 8. similar thing

------
majewsky
This is blocked by my corporate proxy. Maybe because of the ".space" TLD?

~~~
wentin
this sucks, it is on github gh-pages, should be fine on the hosting side,
probably the domain name.
[http://wentin.github.io/cssicon](http://wentin.github.io/cssicon) maybe try
this but probably won't work because it redirect to cssicon.space immediately.

------
rvlouie
Just here to say that I dig the Bubs from Homestarrunner inspired smileys.

------
microcolonel
These don't render correctly at different zoom levels.

