Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: CSS ICON, an icon set crafted by pure CSS

cssicon.space

Post reply on HN
Print view View original

21–30 of 69 posts

Re: Show HN: CSS ICON, an icon set crafted by pure CSS

#21

Post by wentin »

OJFord wrote: post #13

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

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

Re: Show HN: CSS ICON, an icon set crafted by pure CSS

#22

Post by wentin »

nik736 wrote: post #9

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

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

Re: Show HN: CSS ICON, an icon set crafted by pure CSS

#23

Post by pcwalton »

wentin wrote: post #18
amelius wrote: post #7

Why not just use SVG inside a data url? E.g., as in [1]. [1] https://en.wikipedia.org/wiki/Data_URI_scheme#Examples

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.

The painting performance should be pretty similar for both CSS and SVG: they both get rasterized via the same 2D vector graphics backend in popular browser engines. Most 2D vector graphics backends go to a lot of effort to cull invisible regions.

CSS icons may be slightly slower than an optimized SVG due to the overhead of restyling and layout. Also, the browser-side painting may be a bit slower for CSS icons, because border painting involves fairly complex logic compared to drawing a path (and for example in Gecko you have to construct display list items for individual borders but not paths). But we're talking about really small differences: I highly doubt they matter in practice.

Re: Show HN: CSS ICON, an icon set crafted by pure CSS

#24

Post by kraftman »

wentin wrote: post #18
amelius wrote: post #7

Why not just use SVG inside a data url? E.g., as in [1]. [1] https://en.wikipedia.org/wiki/Data_URI_scheme#Examples

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.

You probably want 'arguably' here instead of 'argumentably.'

Re: Show HN: CSS ICON, an icon set crafted by pure CSS

#27

Post by ravenstine »

amelius wrote: post #7

Why not just use SVG inside a data url? E.g., as in [1]. [1] https://en.wikipedia.org/wiki/Data_URI_scheme#Examples

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 to specify a sprite symbol ID as a background URL, for example, even though that would be the most straight forward way to use sprites as icons IMO. CSS icons can have the same effect of having the icons being bundled in a single request while actually working. lol

Re: Show HN: CSS ICON, an icon set crafted by pure CSS

#28

Post by jdauriemma »

phkahler wrote: post #26

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

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.

Re: Show HN: CSS ICON, an icon set crafted by pure CSS

#30

Post by wanda »

ravenstine wrote: post #27
amelius wrote: post #7

Why not just use SVG inside a data url? E.g., as in [1]. [1] https://en.wikipedia.org/wiki/Data_URI_scheme#Examples

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 to specify a sprite symbol ID as a background URL, for example, even though that would be the most straight forward way to use sprites as icons IMO. CSS icons can have the same effect of having the icons being bundled in a single request while…

If you escape the unsafe characters it works everywhere. I've been doing this for ages.

Source: https://codepen.io/yoksel/details/JDqvs/

Post reply on HN