[{"data":1,"prerenderedAt":437},["ShallowReactive",2],{"project-12723281":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":34,"aspects":35,"strip":45,"post_text":46,"what":47,"said":87,"maker_in_thread":208,"shape":219,"grid":224,"attempts":394,"same_week":400,"maker_shows":18,"maker_hidden":429,"reader_version":430,"card":431},"12723281","CSS ICON","An icon set crafted by pure CSS","title","Show HN: CSS ICON, an icon set crafted by pure CSS","http:\u002F\u002Fcssicon.space\u002F#\u002Ficon\u002FS","cssicon.space","wentin",1476690288,2016,250,67,94,2264,5,"legend","dev_tools","css icon library","web_app",[24,25,26,27],"css icons","pure css","icon set","css tricks","mixed",0.015,{"positive":31,"neutral":32,"mixed":33,"critical":31},10,20,4,44,{"execution":36,"docs":39,"idea":41,"performance":43,"design":44},{"positive":37,"critical":38},1,2,{"positive":40,"critical":40},0,{"positive":42,"critical":33},3,{"positive":38,"critical":42},{"positive":33,"critical":40},[42,42,42,37,42,18,42,37,37,40,42,40,40,42,18,40,18,42,40,18,37,40,42,18,42,42,37,42,37,42,40,42,42,40,18,42,18,42,37,42],null,{"problem":48,"audience":61,"pricing":46,"motivation":66,"time_to_build":70,"stack":74,"openness":84,"stage":85,"team_size":86},{"value":49,"source":50,"evidence":51},"Provides icons built with CSS alone, avoiding SVG or icon font requests, and teaches CSS techniques.","maker",[52,55,58],{"id":53,"by":11,"text":54},"12724634","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.…",{"id":56,"by":11,"text":57},"12737091","like I said in the video, I admit it is not a replacement technique of SVG for icons, but it does have its niche use cases. When I prototype, or I need some simple icon that I…",{"id":59,"by":11,"text":60},"12727158","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…",{"value":62,"source":50,"evidence":63},"Front-end developers prototyping and people learning CSS.",[64,65],{"id":56,"by":11,"text":57},{"id":59,"by":11,"text":60},{"value":67,"source":50,"evidence":68},"Enjoyed the creative constraints of building icons with CSS.",[69],{"id":53,"by":11,"text":54},{"value":71,"source":50,"evidence":72},"A few weekends.",[73],{"id":53,"by":11,"text":54},[75,80],{"value":76,"source":50,"evidence":77},"CSS",[78],{"id":79},"post",{"value":81,"source":50,"evidence":82},"AngularJS",[83],{"id":56,"by":11,"text":57},"unknown","launched","solo",{"praise":88,"objections":115,"requests":149,"questions":157,"alternatives":181},[89,101,108],{"value":90,"source":91,"evidence":92},"Useful for learning CSS techniques.","commenter",[93,97],{"id":94,"by":95,"text":96},"12725583","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…",{"id":98,"by":99,"text":100},"12729260","mjurczyk","Amazing work, love how you managed to create so many variations from 3 sub-elements!",{"value":102,"source":91,"evidence":103},"Clever border-radius and box-shadow tricks.",[104],{"id":105,"by":106,"text":107},"12728849","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…",{"value":109,"source":91,"evidence":110},"Codepen step highlighting is clear.",[111],{"id":112,"by":113,"text":114},"12723845","_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…",[116,127,138],{"value":117,"source":91,"evidence":118},"Pure CSS is less practical than SVG for complex icons.",[119,123],{"id":120,"by":121,"text":122},"12733960","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…",{"id":124,"by":125,"text":126},"12725154","phkahler","Isn't that what SVG was supposed to be for?",{"value":128,"source":91,"evidence":129},"Some icons render poorly at small sizes or zoom levels.",[130,134],{"id":131,"by":132,"text":133},"12723808","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…",{"id":135,"by":136,"text":137},"12729686","microcolonel","These don't render correctly at different zoom levels.",{"value":139,"source":91,"evidence":140},"The page uses a lot of CPU.",[141,145],{"id":142,"by":143,"text":144},"12725847","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…",{"id":146,"by":147,"text":148},"12727501","hughes","Something on that page is definitely gobbling up CPU. I barely get 10fps when scrolling.",[150],{"value":151,"source":91,"evidence":152},"Show animated icons.",[153],{"id":154,"by":155,"text":156},"12728413","nthcolumn","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…",[158,170],{"value":159,"source":91,"evidence":160},"What is the use case compared to SVG?",[161,165,169],{"id":162,"by":163,"text":164},"12724257","qz_","This looks very cool, but why would you use this instead of using svg?",{"id":166,"by":167,"text":168},"12724187","nik736","Very cool, good job! But what's the use-case?",{"id":124,"by":125,"text":126},{"value":171,"source":91,"evidence":172},"Performance compared to SVG or icon fonts?",[173,177],{"id":174,"by":175,"text":176},"12723863","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…",{"id":178,"by":179,"text":180},"12724019","bhouston","What is cheaper CPU and download wise? CSS icons or font icons.",[182,193,201],{"value":183,"source":91,"evidence":184},"SVG icons",[185,189],{"id":186,"by":187,"text":188},"12724054","amelius","Why not just use SVG inside a data url? E.g., as in [1]. [1] https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FData_URI_scheme#Examples",{"id":190,"by":191,"text":192},"12724327","OJFord","Assuming I can find an equivalently desirable icon here, in font awesome, or an SVG; which should I prefer?",{"value":194,"source":91,"evidence":195},"Font Awesome",[196,197],{"id":190,"by":191,"text":192},{"id":198,"by":199,"text":200},"12730133","RubyPinch","by 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…",{"value":202,"source":91,"evidence":203},"Inline SVG sprites",[204],{"id":205,"by":206,"text":207},"12725193","ravenstine","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…",{"comments":209,"answered":210,"key":211},15,9,[212,213,216],{"id":53,"text":54},{"id":214,"text":215},"12725991","this is awesome analyze, thanks!",{"id":217,"text":218},"12737023","> 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…",{"commenters":220,"max_depth":221,"maker_replies":209,"first_comment_mins":222,"lifespan_hours":223},43,6,149,34,[225,227,231,235,238,241,243,245,249,251,253,255,259,263,265,267,269,271,273,277,279,282,285,287,289,290,291,294,295,298,301,303,304,306,307,311,315,317,318,323,325,328,331,333,336,339,342,343,345,346,347,350,352,355,358,360,362,364,369,371,373,376,380,382,386,389,392],[112,40,42,226,113,40],"project\u002Fmixed\u002Fexecution",[228,40,42,229,230,40],"12724230","project\u002Fneutral\u002Fdocs","Kiro",[232,40,42,233,234,40],"12728733","project\u002Fneutral\u002Fnone","lucasmullens",[236,40,42,233,237,40],"12729069","caub",[239,40,42,233,240,40],"12733046","deecewan",[186,37,37,242,187,40],"project\u002Fcritical\u002Fidea",[53,37,40,244,11,37],"maker\u002Fneutral\u002Fidea",[246,37,42,247,248,40],"12724745","project\u002Fneutral\u002Fperformance","pcwalton",[214,37,40,250,11,37],"maker\u002Fpositive\u002Fnone",[154,37,18,252,155,40],"project\u002Fpositive\u002Fperformance",[254,37,42,247,248,40],"12729097",[256,37,42,257,258,40],"12724948","maker\u002Fneutral\u002Fdocs","kraftman",[260,37,37,261,262,40],"12727432","project\u002Fcritical\u002Fexecution","ysavir",[120,37,37,264,121,40],"maker\u002Fcritical\u002Fidea",[217,37,40,266,11,37],"commenter\u002Fneutral\u002Fidea",[56,37,40,268,11,37],"project\u002Fneutral\u002Fidea",[270,37,37,242,136,40],"12724648",[205,37,18,272,206,40],"project\u002Fpositive\u002Fidea",[274,37,40,275,276,40],"12725333","commenter\u002Fneutral\u002Fnone","wanda",[278,37,40,275,206,40],"12725918",[280,37,40,275,281,40],"12727002","j4_james",[283,37,40,266,284,40],"12729835","rvlouie",[174,38,42,286,175,40],"project\u002Fmixed\u002Fdesign",[288,38,40,268,11,37],"12724661",[94,42,18,272,95,40],[59,42,40,257,11,37],[292,42,18,293,95,40],"12729068","project\u002Fpositive\u002Fdesign",[178,33,42,247,179,40],[296,33,42,247,297,40],"12724547","Retr0spectrum",[299,33,42,247,300,40],"12726441","cuu508",[302,33,40,252,11,37],"12725552",[105,18,18,293,106,40],[305,18,40,250,11,37],"12729528",[190,221,42,233,191,40],[308,221,37,309,310,40],"12724377","project\u002Fcritical\u002Fnone","italiancheese",[312,221,40,313,314,40],"12724579","other\u002Fneutral\u002Fnone","retox",[316,221,40,268,11,37],"12724728",[198,221,42,233,199,40],[319,320,18,321,322,40],"12724447",7,"project\u002Fpositive\u002Fexecution","myfonj",[324,320,42,268,281,40],"12727250",[326,320,42,327,199,40],"12730165","project\u002Fneutral\u002Fdesign",[329,320,40,330,11,37],"12730353","maker\u002Fneutral\u002Fdesign",[332,320,42,327,199,40],"12731877",[334,320,40,335,11,37],"12731892","commenter\u002Fpositive\u002Fnone",[142,337,37,338,143,40],8,"project\u002Fcritical\u002Fperformance",[340,337,42,247,341,40],"12725994","WalterSear",[146,337,37,338,147,40],[344,337,40,247,11,37],"12727538",[162,210,42,268,163,40],[131,31,42,286,132,40],[348,31,40,313,349,40],"12724169","whatupdave",[124,351,37,242,125,40],11,[353,351,18,252,354,40],"12725214","jdauriemma",[356,351,42,247,357,40],"12725444","oftenwrong",[359,351,40,313,125,40],"12725620",[361,351,40,313,354,40],"12727092",[98,363,18,272,99,40],12,[365,366,42,367,368,40],"12725092",13,"project\u002Fmixed\u002Fnone","kalleboo",[166,370,42,268,167,40],14,[372,370,40,268,11,37],"12724740",[374,209,18,293,375,40],"12723937","BillyKelly",[377,378,42,327,379,40],"12727591",16,"baby",[381,378,40,327,11,37],"12727815",[383,384,37,338,385,40],"12725292",17,"majewsky",[387,384,40,388,11,37],"12727296","maker\u002Fneutral\u002Fnone",[390,391,18,293,284,40],"12729824",18,[135,393,37,261,136,40],19,[395,396],{"id":4,"t":12,"points":14,"comments":15},{"id":397,"t":398,"points":399,"comments":42},"12807863",1477592849,41,[401,406,411,416,420,425],{"id":402,"name":403,"points":404,"category":405},"12721709","I made a Chrome extension that helps battle impulsive procrastination",277,"productivity",{"id":407,"name":408,"points":409,"category":410},"12742395","Hawkpost",275,"security_privacy",{"id":412,"name":413,"points":414,"category":415},"12699767","Styled-components",172,"languages",{"id":417,"name":418,"points":419,"category":415},"12735665","Swip.js",152,{"id":421,"name":422,"points":423,"category":424},"12703679","Stack Match",136,"web_saas",{"id":426,"name":427,"points":428,"category":405},"12745449","Tdo",78,false,"v2",{"id":432,"name":5,"line":6,"ai":429,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":433,"top":18,"kw":434,"maker":11,"domain":10,"tier":19,"attempts":38,"strip":435,"url":9,"mix":436,"praise":90,"objection":117,"sub":21},12723281,0.02,[24,25,26,27],"3331353110300350530510353313130330535313",[31,32,33,31],1793990948908]