CSS ICON
Dev tools
css icon library
SHOW HN2016
How HN took it
10 positive, 20 neutral or asking, 4 mixed, 10 critical, out of 44 comments about the project. Thread score +0.01.
Idea: 3 for, 4 againstPerformance: 2 for, 3 againstDesign: 4 for, 0 againstExecution: 1 for, 2 against
The thread, comment by comment
Each row is a top-level comment and its replies, in HN's order. Select a cell to open that comment on HN.
positive neutral or mixed critical about another commenter or something else the maker
What HN said
What people liked
Useful for learning CSS techniques.
From 2 comments
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…
MOARDONGZPLZ on HNAmazing work, love how you managed to create so many variations from 3 sub-elements!
mjurczyk on HN
Clever border-radius and box-shadow tricks.
From 1 comment
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…
EdSharkey on HN
Codepen step highlighting is clear.
From 1 comment
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…
_puk on HN
Objections
Pure CSS is less practical than SVG for complex icons.
From 2 comments
> 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…
sly010 on HNIsn't that what SVG was supposed to be for?
phkahler on HN
Some icons render poorly at small sizes or zoom levels.
From 2 comments
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…
MattBearman on HNThese don't render correctly at different zoom levels.
microcolonel on HN
The page uses a lot of CPU.
From 2 comments
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…
brudgers on HNSomething on that page is definitely gobbling up CPU. I barely get 10fps when scrolling.
hughes on HN
Requests
Show animated icons.
From 1 comment
What about caching - is that an advantage over inline SVG? I imagine the css would compress better too? I'd like to see animated ones. Holy geocities! I have no clue how it…
nthcolumn on HN
Questions
What is the use case compared to SVG?
From 3 comments
This looks very cool, but why would you use this instead of using svg?
qz_ on HNVery cool, good job! But what's the use-case?
nik736 on HNIsn't that what SVG was supposed to be for?
phkahler on HN
Performance compared to SVG or icon fonts?
From 2 comments
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…
zhan_eg on HNWhat is cheaper CPU and download wise? CSS icons or font icons.
bhouston on HN
Alternatives named
SVG icons
From 2 comments
Why not just use SVG inside a data url? E.g., as in [1]. [1] https://en.wikipedia.org/wiki/Data_URI_scheme#Examples
amelius on HNAssuming I can find an equivalently desirable icon here, in font awesome, or an SVG; which should I prefer?
OJFord on HN
Font Awesome
From 2 comments
Assuming I can find an equivalently desirable icon here, in font awesome, or an SVG; which should I prefer?
OJFord on HNby my opinion if you want something found on a CDN and as a result more likely cached in browsers (or pre-loaded via an extension), font awesome is a safe bet If you want the…
RubyPinch on HN
Inline SVG sprites
From 1 comment
I was barely awake when just having this problem last night, but SVG sprites(a bunch of icons in 1 s SVG file) have very limited support in CSS. In Chrome, it doesn't even work…
ravenstine on HN