[{"data":1,"prerenderedAt":489},["ShallowReactive",2],{"project-9047086":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":27,"sentiment":28,"stance_mix":29,"scored_comments":33,"aspects":34,"strip":44,"post_text":45,"what":46,"said":70,"maker_in_thread":259,"shape":270,"grid":274,"attempts":451,"same_week":452,"maker_shows":36,"maker_hidden":481,"reader_version":482,"card":483},"9047086","Littlebox","A pure CSS icon library – worth continuing?","title","Show HN: Littlebox, a pure CSS icon library – worth continuing?","http:\u002F\u002Flittlebox.cabmaddux.com","littlebox.cabmaddux.com","cabmaddux",1423860377,2015,192,68,93,2565,4,"notable","dev_tools","icon library","library",[24,21,25,26],"css icons","pure css","svg icons","debated",0.053,{"positive":30,"neutral":31,"mixed":18,"critical":32},15,13,17,49,{"privacy":35,"performance":38,"execution":39,"design":41,"idea":43},{"positive":36,"critical":37},1,0,{"positive":36,"critical":18},{"positive":40,"critical":18},3,{"positive":42,"critical":18},5,{"positive":40,"critical":42},[42,40,36,40,36,42,40,42,40,36,40,36,37,36,36,36,40,42,40,36,37,42,40,42,36,36,37,40,36,36,37,42,37,40,42,36,42,42,42,40],null,{"problem":47,"audience":45,"pricing":45,"motivation":54,"time_to_build":45,"stack":61,"openness":67,"stage":68,"team_size":69},{"value":48,"source":49,"evidence":50},"Provides icons drawn with pure CSS, with individually colorable elements","maker",[51],{"id":52,"by":11,"text":53},"9049006","True, may just be a neat hack. The opportunity to work with individual elements of an icon independently and the challenge of the constraints was the initial draw to the project.…",{"value":55,"source":49,"evidence":56},"Enjoyed building it and the challenge of working with individual icon elements",[57,60],{"id":58,"by":11,"text":59},"9047653","True, a great point. It's not a bad creative outlet. Thanks for taking a look!",{"id":52,"by":11,"text":53},[62],{"value":63,"source":49,"evidence":64},"CSS",[65],{"id":66},"post","open_source","launched","unknown",{"praise":71,"objections":110,"requests":189,"questions":221,"alternatives":233},[72,88,99],{"value":73,"source":74,"evidence":75},"Icons look great and are well done","commenter",[76,80,84],{"id":77,"by":78,"text":79},"9047555","Gyonka","Oh yes absolutely. Theses are fantastic icons, really well done man.",{"id":81,"by":82,"text":83},"9047641","nwenzel","If you liked building it, then it's worth continuing. The icons look great.",{"id":85,"by":86,"text":87},"9048402","ravitation","These look amazing! Keep up the awesome work! I love CSS icons.",{"value":89,"source":74,"evidence":90},"Small file size",[91,95],{"id":92,"by":93,"text":94},"9047720","tracker1","Nice.. with gz transmission, looks like it's under 9kb, which isn't bad at all for an icon set.",{"id":96,"by":97,"text":98},"9047732","cturhan","Continue Cabell, these are very nice set of icons with a small file size.",{"value":100,"source":74,"evidence":101},"Flag icons are nice",[102,106],{"id":103,"by":104,"text":105},"9049324","quakenul","The flag icons are super nice. As for the \"littlebox icon set\", from my standpoint (mostly designer) no. In an icon set I am looking for a) feel and b) perfect balance between…",{"id":107,"by":108,"text":109},"9049819","akldjlafkjalfk","I like the flags, but wanted to the colour of some flags issue too.",[111,130,145,160,179],{"value":112,"source":74,"evidence":113},"CSS is hacky; SVG or icon fonts are better suited",[114,118,122,126],{"id":115,"by":116,"text":117},"9048485","michaelbuddy","I'd stay away from css to create images personally. it's just too hackish. seems like wikipedia implements some sort of svg to png conversion on the fly. that is preferable for…",{"id":119,"by":120,"text":121},"9048264","jszymborski","I wonder if SVG is more suited to something like this...",{"id":123,"by":124,"text":125},"9047928","illicium","Not if this is anything more than an academic exercise. Nice effort, but SVG and, to a lesser degree, icon fonts, are better for this sort of thing.",{"id":127,"by":128,"text":129},"9052453","pennyallan","It's a neat trick to be able to do this using only css, but SVG is really the more suitable technology fort his type of graphic.",{"value":131,"source":74,"evidence":132},"Icons break or display inconsistently across browsers and zoom levels",[133,137,141],{"id":134,"by":135,"text":136},"9050382","elpool2","These icons get warped in Chrome when you set the zoom level to 125%. For example: the roof on the house in the lb-home icon is no longer centered.",{"id":138,"by":139,"text":140},"9048260","dflock","Nice - although they break up a bit if you zoom the page, sadly.",{"id":142,"by":143,"text":144},"9047890","coderdude","Don't forget about compatibility. You can be reasonably sure that font icons will display the same everywhere. CSS-based icons are all over the map compatibility-wise (display…",{"value":146,"source":74,"evidence":147},"Animated icons cause high CPU load",[148,152,156],{"id":149,"by":150,"text":151},"9047773","cs-","Tested your page on an i3, all 4 cores are at 60%+ that's not very good... probably affects only the animated ones still",{"id":153,"by":154,"text":155},"9048213","riquito","I can confirm that an i5-4200U (decent \u003C 1000$ notebook) goes from 2-4% lowest proc frequency to 14% max proc frequency (and the fan starts). Using Firefox. It is clearly…",{"id":157,"by":158,"text":159},"9048559","detaro","Similar here, current chrome on Windows 7 pulls CPU load from ~8 to 40 % and spins up the fan noticeably.",{"value":161,"source":74,"evidence":162},"Flag colour order and proportions are wrong",[163,167,171,175],{"id":164,"by":165,"text":166},"9047667","vmarsy","It looks really great, changing color via CSS is neat! maybe you could put the license information on that page! (The github page says it is MIT License for those who wonder) btw…",{"id":168,"by":169,"text":170},"9049746","j29h","Nice work. But your german and french flags have the wrong order of colors.",{"id":172,"by":173,"text":174},"9048290","voidiac","There are some more problems with the flags. The colours of the french and german flag are in the wrong order. The icelandic and norwegian flags are missing the white line around…",{"id":176,"by":177,"text":178},"9050369","wazoox","Nice. A comment on the flags: I find the green of Italy indistinguishable from the blue on other flags, maybe make it lighter or something? And France is inverted: it's blue,…",{"value":180,"source":74,"evidence":181},"Currency icons render inconsistently",[182,186],{"id":183,"by":184,"text":185},"9047846","Retr0spectrum","Some of the currencies look a bit off for me: http:\u002F\u002Fi.imgur.com\u002FGhjPBr7.png I'm using Firefox on Arch. I guess it could be something to do with me not having the right fonts…",{"id":187,"by":11,"text":188},"9047964","Yeah there are three currency icons that change a lot between browsers because part of the icon is a character. Definitely doesn't really work. Having trouble finding a way to…",[190,199,210,214],{"value":191,"source":74,"evidence":192},"Fix flag colours and Swiss flag shape",[193,197,198],{"id":194,"by":195,"text":196},"9047701","wereHamster","The swiss flag should be square.",{"id":164,"by":165,"text":166},{"id":172,"by":173,"text":174},{"value":200,"source":74,"evidence":201},"Use currentColor or inherit for colour changes",[202,206],{"id":203,"by":204,"text":205},"9049375","k_","I like it :) Something that could further ease the color customization would be to use currentColor [1] on the border colors, allowing the customization to be made simply by…",{"id":207,"by":208,"text":209},"9048249","notatoad","nicely done, these are pretty cool. like anything interesting in css i'm not sure if they're practical, but they're cool regardless of the practicality. >to set your own color,…",{"value":211,"source":74,"evidence":212},"Add license information to the page",[213],{"id":164,"by":165,"text":166},{"value":215,"source":74,"evidence":216},"Add animated stopped states",[217],{"id":218,"by":219,"text":220},"9047752","turshija","Really nice icons, good job ! One suggestion for animated icons: add \"animated\" and \"stopped\" states if you didn't already.",[222,229],{"value":223,"source":74,"evidence":224},"Is it faster than images, sprites or icon fonts?",[225],{"id":226,"by":227,"text":228},"9047782","Apofis","So, the million dollar question: is it faster to use these, images\u002Fsprites, icon fonts? The trade-off I'm assuming is download\u002Fload speed vs. cpu load?",{"value":230,"source":49,"evidence":231},"Is it worth continuing?",[232],{"id":66},[234,242,248,255],{"value":235,"source":74,"evidence":236},"Inline SVG icons",[237,241],{"id":238,"by":239,"text":240},"9048955","jakobegger","I was completely amazed when I recently checked browser support for inline SVG; almost all current browsers support them! [1] So I decided to use inline SVG for icons and logos.…",{"id":119,"by":120,"text":121},{"value":243,"source":74,"evidence":244},"Font Awesome",[245],{"id":246,"by":143,"text":247},"9048210","Font Awesome allows stacking: http:\u002F\u002Fblog.fontawesome.io\u002F2014\u002F09\u002F25\u002Fcustom-file-types-with-stacked-icons\u002F Here's their demo but with some color added:…",{"value":249,"source":74,"evidence":250},"Pure CSS GUI icons by Nicolas Gallagher",[251],{"id":252,"by":253,"text":254},"9048760","chdir","Nice work. I'll add 2 more to the mix (bookmarked these while searching for pure CSS icons recently). To answer the title, yes I'd definitely use one of these…",{"value":256,"source":74,"evidence":257},"Icono",[258],{"id":252,"by":253,"text":254},{"comments":260,"answered":261,"key":262},11,2,[263,266,267],{"id":264,"text":265},"9047976","Thanks very much! I had no idea at all, I'll definitely look into it. Great to hear there's another positive for the project. I'll take a look back at the email and download…",{"id":58,"text":59},{"id":268,"text":269},"9047683","For sure, thanks for taking a look! And good eye on the French flag! I'll get that fixed up. I'll make sure to add license info to that demo\u002Fdownload page. Thanks again, a huge…",{"commenters":271,"max_depth":18,"maker_replies":260,"first_comment_mins":272,"lifespan_hours":273},52,85,40,[275,279,281,283,285,289,291,292,296,297,298,302,304,305,308,311,312,315,317,319,321,324,326,329,332,333,336,337,340,343,348,350,352,355,360,362,363,365,367,370,372,374,375,377,379,383,385,387,391,393,395,397,399,402,405,408,412,417,421,423,425,426,430,432,435,439,443,447],[276,37,42,277,278,37],"9047741","project\u002Fpositive\u002Fprivacy","chrisdotcode",[264,37,37,280,11,36],"maker\u002Fpositive\u002Fnone",[226,36,40,282,227,37],"project\u002Fneutral\u002Fperformance",[142,36,36,284,143,37],"project\u002Fcritical\u002Fexecution",[286,36,40,287,288,37],"9048089","project\u002Fneutral\u002Fexecution","gdix",[246,36,40,290,143,37],"project\u002Fneutral\u002Fdesign",[134,36,36,284,135,37],[293,261,36,294,295,37],"9048517","project\u002Fcritical\u002Fdesign","readme",[81,40,42,280,82,37],[58,40,37,280,11,36],[299,18,40,300,301,37],"9049457","maker\u002Fneutral\u002Fnone","mathgeek",[164,42,42,303,165,37],"project\u002Fpositive\u002Fdesign",[268,42,37,300,11,36],[306,42,40,290,307,37],"9047869","tschuy",[309,42,40,290,310,37],"9049129","Someone",[203,42,40,290,204,37],[115,313,36,314,116,37],6,"project\u002Fcritical\u002Fidea",[119,316,40,287,120,37],7,[318,316,36,314,116,37],"9048487",[238,316,37,320,239,37],"other\u002Fneutral\u002Fnone",[322,316,37,320,323,37],"9049327","vbezhenar",[325,316,37,320,239,37],"9049339",[149,327,36,328,150,37],8,"project\u002Fcritical\u002Fperformance",[330,327,37,331,184,37],"9047824","commenter\u002Fneutral\u002Fperformance",[153,327,36,328,154,37],[334,327,37,335,150,37],"9049840","commenter\u002Fneutral\u002Fnone",[157,327,36,328,158,37],[338,327,40,339,150,37],"9049824","project\u002Fmixed\u002Fperformance",[92,341,42,342,93,37],9,"project\u002Fpositive\u002Fperformance",[344,345,42,346,347,37],"9047633",10,"project\u002Fpositive\u002Fidea","mkeedlinger",[349,345,37,300,11,36],"9047650",[103,260,40,351,104,37],"project\u002Fmixed\u002Fdesign",[353,260,36,294,354,37],"9049422","henpa",[356,357,40,358,359,37],"9048153",12,"project\u002Fneutral\u002Fidea","rbosinger",[52,357,37,361,11,36],"maker\u002Fneutral\u002Fidea",[77,31,42,303,78,37],[364,31,37,280,11,36],"9047595",[252,366,40,358,253,37],14,[368,30,37,320,369,37],"9049883","jbhatab",[218,371,42,303,219,37],16,[373,371,37,300,11,36],"9047941",[183,32,36,284,184,37],[187,32,37,376,11,36],"maker\u002Fneutral\u002Fexecution",[176,378,36,294,177,37],18,[380,378,37,381,382,37],"9050498","commenter\u002Fneutral\u002Fdesign","sejje",[168,384,36,294,169,37],19,[96,386,42,280,97,37],20,[388,389,40,287,390,37],"9048004",21,"teamhappy",[138,392,36,328,139,37],22,[127,394,36,314,128,37],23,[123,396,36,314,124,37],24,[398,396,37,300,11,36],"9048045",[207,400,42,401,208,37],25,"project\u002Fpositive\u002Fexecution",[403,400,40,287,404,37],"9048286","twiss",[406,400,37,407,11,36],"9049008","maker\u002Fpositive\u002Fexecution",[409,410,37,320,411,37],"9049067",26,"namelezz",[413,414,40,415,416,37],"9048599",27,"project\u002Fmixed\u002Fexecution","bg0",[418,419,42,346,420,37],"9049282",28,"jbverschoor",[194,422,40,290,195,37],29,[424,422,37,300,11,36],"9047932",[172,422,36,284,173,37],[427,428,42,407,429,37],"9047718",30,"theklr",[107,431,40,415,108,37],31,[85,433,42,434,86,37],32,"maker\u002Fpositive\u002Fdesign",[436,437,42,346,438,37],"9050120",33,"butifanu",[440,441,42,303,442,37],"9048489",34,"impish19",[444,445,42,407,446,37],"9048844",35,"skynetv2",[448,449,36,314,450,37],"9050337",36,"maxxxcohen",[],[453,457,462,467,471,476],{"id":454,"name":455,"points":456,"category":20},"9050970","websocketd",421,{"id":458,"name":459,"points":460,"category":461},"9040841","Let's Chat",350,"productivity",{"id":463,"name":464,"points":465,"category":466},"9056423","NomadHouse",127,"web_saas",{"id":468,"name":469,"points":470,"category":20},"9058872","Calc",94,{"id":472,"name":473,"points":474,"category":475},"9040423","Portal",86,"infrastructure",{"id":477,"name":478,"points":479,"category":480},"9050379","Sierpinski Valentine",72,"learning_science",false,"v2",{"id":484,"name":5,"line":6,"ai":481,"cat":20,"year":13,"points":14,"comments":15,"rec":27,"s":485,"top":18,"kw":486,"maker":11,"domain":10,"tier":19,"attempts":37,"strip":487,"url":9,"mix":488,"praise":73,"objection":112,"sub":21},9047086,0.05,[24,21,25,26],"5313153531310111353105351103110503515553",[30,31,18,32],1793990920297]