15 ms·
Show HN: CSS ICON, an icon set crafted by pure CSS
- BillyKelly 10y agoI like clicking on a class and selecting the item. Good job. On Opera 40.0.2308.81 work and Chrome 54 good work.
- MattBearman 10y agoVery 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 10y agoHere's a helpful video on the topic: https://www.youtube.com/watch?v=krbKkLPXwlQ https://www.youtube.com/watch?v=krbKkLPXwlQ
- _puk 10y agoNot 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?
- Kiro 10y ago> Slightly OT, but the codepen highlighting of the various steps taken is incredibly intuitive Is that really part of Codepen though? I thought it was something the author had done manually.
- lucasmullens 10y agoIE8 doesn't support SVG, which might matter for some websites
- zhan_eg 10y agoWell, 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 10y agooh 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.
- bhouston 10y agoWhat is cheaper CPU and download wise? CSS icons or font icons.
- Retr0spectrum 10y agoRE 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 10y agoYou can use e.g. icomoon.io to build tailored icon font files
- wentin 10y agocss icon definitely win on the download wise. It has much less code.
- amelius 10y agoWhy 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 10y agocss 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.
- pcwalton 10y agoThe 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.
- nik736 10y agoVery cool, good job! But what's the use-case?
- wentin 10y agoi 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
- qz_ 10y agoThis looks very cool, but why would you use this instead of using svg?
- deleted 10y ago[deleted]
- OJFord 10y agoAssuming I can find an equivalently desirable icon here, in font awesome, or an SVG; which should I prefer?
- italiancheese 10y agoSVG
- retox 10y agoI dislike using specialist fonts because it's overloading what a character is supposed to show. If the user doesn't have the webfont, either because it was blocked or because of support reasons, the page becomes a mess of alphabet soup.
- wentin 10y agoCSS 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
- RubyPinch 10y agoby 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 most pure option, SVG (hint, change the background of the css icon boxes to see why, the usage of background-colored boxes everywhere is pretty damaging if you want to use it on anything other than flat colors) if you want the icon to interact with your content (want text in a speech bubble? changing numbers? etc?) or to be quickly tailorable, then probably CSS icons
- myfonj 10y agoReally 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)
- j4_james 10y agoI remember seeing something like this before too. This is the one I was thinking of. http://nicolasgallagher.com/pure-css-gui-icons/ http://nicolasgallagher.com/pure-css-gui-icons/
- RubyPinch 10y agoits mostly pretty avoidable, border-image with a gradient solves it a majority of the time
- wentin 10y agocan you say more about this approach? very curious
- RubyPinch 10y agohttps://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
- wentin 10y agoyour solution is genius! thanks so much!
- kalleboo 10y agoGreat 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...
- phkahler 10y agoIsn't that what SVG was supposed to be for?
- jdauriemma 10y agoAll 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 10y agoYou can avoid the separate request by inlining the SVG or using a data URI
- phkahler 10y agoI 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 10y agoI think the webpack ecosystem has a lot of plugins for inlining.
- majewsky 10y agoThis is blocked by my corporate proxy. Maybe because of the ".space" TLD?
- wentin 10y agothis 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.
- MOARDONGZPLZ 10y agoWow! 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 10y agothis 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 10y agoThis is great, thanks! Love the sun icon.
- brudgers 10y agoMy 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.
- WalterSear 10y agoIt's the site, not the css, I'd wager.
- hughes 10y agoSomething on that page is definitely gobbling up CPU. I barely get 10fps when scrolling.
- wentin 10y agothis sucks! I am trying to figure out why, could be the angular app's performance?
- baby 10y agoWhy not the character "+" instead of tracing two vertical/horizontal bars?
- wentin 10y agothere 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
- EdSharkey 10y agoWhat 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 10y agoawww, thanks so much for you nice words!
- mjurczyk 10y agoAmazing work, love how you managed to create so many variations from 3 sub-elements!
- microcolonel 10y agoThese don't render correctly at different zoom levels.
- rvlouie 10y agoJust here to say that I dig the Bubs from Homestarrunner inspired smileys.