

Show HN: Littlebox, a pure CSS icon library – worth continuing? - cabmaddux
http://littlebox.cabmaddux.com

======
chrisdotcode
EDIT: To the author, the download and email icons are the same.

This is fantastic. A feature you might not have realized is that it works well
with NoScript users. With font-faces considered harmful[0], these icons can be
delivered to the user, vulnerability free.

[0] [https://hackademix.net/2010/03/24/why-noscript-blocks-web-
fo...](https://hackademix.net/2010/03/24/why-noscript-blocks-web-fonts/)

~~~
cabmaddux
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 icons, good eye.

------
Apofis
So, the million dollar question: is it faster to use these, images/sprites,
icon fonts? The trade-off I'm assuming is download/load speed vs. cpu load?

~~~
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 issues across browsers).

~~~
gdix
Sure, but font icons can only be one color. Can you give an example of a
compatibility issue?

~~~
coderdude
Font Awesome allows stacking: [http://blog.fontawesome.io/2014/09/25/custom-
file-types-with...](http://blog.fontawesome.io/2014/09/25/custom-file-types-
with-stacked-icons/)

Here's their demo but with some color added:
[http://codepen.io/anon/pen/VYQMea](http://codepen.io/anon/pen/VYQMea)

But yeah, you're typically stuck with one color. Here's a demo that shows off
multi-color fonts (Firefox only): [http://pixelambacht.nl/2014/compyx-a-
multicolor-8bit-font/](http://pixelambacht.nl/2014/compyx-a-multicolor-8bit-
font/)

That technique could be used to make multi-color font icons if it were cross-
browser compatible. Maybe one day. But I think SVG icons are where things are
headed.

As for compatibility issues, there's one listed on this page:
[https://news.ycombinator.com/item?id=9047846](https://news.ycombinator.com/item?id=9047846)

------
readme
Looks great but the first thing we see when we load the page is a couple lines
of instruction and an icon which is not obvious/ just looks like a square and
it's confusing.

If you want more people to use it, take the section that has the picture of
ALL the icons, and move it to the top of the landing page. Just put some text
like "LittleBox something about these icons people will like" in big letters.

I almost left the page. I am glad I scrolled down because I really like them,
and I can use the flags in one of my projects.

------
nwenzel
If you liked building it, then it's worth continuing.

The icons look great.

~~~
cabmaddux
True, a great point. It's not a bad creative outlet.

Thanks for taking a look!

------
mathgeek
First off, I think this is an awesome portfolio project.

As far as being worth continuing, I would say it's worth maintaining but not
adding to (beyond compatibility) moving forward. It's a great example of what
you're capable of, and maybe some might even use it seriously, but I know I'd
start worrying about every little "wish they had/did this" comment that came
my way. That leads to burnout.

------
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 the french flag is backwards (Blue - White - Red is the good one)

EDIT: Thanks for the flag fix benjamin!

~~~
cabmaddux
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/download page. Thanks again, a
huge help!

~~~
tschuy
Aditionally, with the flags, I noticed that you have Switzerland as a
rectangle. I know that's not an uncommon representation of it, but its flag is
actually a square.

Just an fyi :)

~~~
Someone
And in the "pedantic++" category: check out flag proportions, too. See for
example [https://flagspot.net/flags/nl-lu.html](https://flagspot.net/flags/nl-
lu.html), which explains the difference between the flags of Monaco and
Indonesia (buried in a discussion about the flags of the Netherlands and
Luxembourg): same colors, but different proportions.

So, Belgium should be 13:15
([https://flagspot.net/flags/be.html](https://flagspot.net/flags/be.html), for
US flags 10:19 seems best for all uses ([https://flagspot.net/flags/us-
size.html#prop](https://flagspot.net/flags/us-size.html#prop)), etc.

But that certainly is just a fyi :)

------
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 me. css isn't even good at what it's intended for. I
certainly don't see it solving more problems.

------
jszymborski
I wonder if SVG is more suited to something like this...

~~~
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. It's extremely fast (no separate network request,
images embedded in gzipped html source), and as a bonus I can style the images
easily using CSS (eg. change colors on hover/active state)

Example see here:
[http://jsfiddle.net/Lszz5392/1/](http://jsfiddle.net/Lszz5392/1/)

The nicest part about this is that I can use Adobe Illustrator (or any other
vector editor) to create the graphics, and then paste them straight into HTML.

[1]: [http://caniuse.com/#feat=svg-html5](http://caniuse.com/#feat=svg-html5)

~~~
vbezhenar
It might sound weird but I actually like to draw simple SVG images using text
editor. SVG is well suited for that, it's readable and compact.

~~~
jakobegger
Yes, I've done that too. What's even nicer is that you can write scripts that
generate SVG. Drawing symmetric things like a gear can be very cumbersome in a
vector editor, but it's really nice if you draw it with a script. (And I was
finally able to make use of all the math & geometry I learned in school)

------
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

~~~
Retr0spectrum
That doesn't sound right. My 2520M stays at about 8%, using Firefox. That's
still relatively high, but in reality there would only be a few on the screen
at once.

~~~
riquito
I can confirm that an i5-4200U (decent < 1000$ notebook) goes from 2-4% lowest
proc frequency to 14% max proc frequency (and the fan starts). Using Firefox.
It is clearly noticeable. Of course YMMV

------
tracker1
Nice.. with gz transmission, looks like it's under 9kb, which isn't bad at all
for an icon set.

------
mkeedlinger
Certainly continue! I think there's a lot more you could do, and I really like
them so far.

~~~
cabmaddux
Thanks! I agree might be interesting to try to capitalize further on
animating/coloring individual elements and work on scalability. Just trying to
gauge how much time to invest.

The feedback is a huge help!

------
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 each icon
so everything feels connected.

That in itself is super hard to get right, even when not limiting yourself to
CSS to do it. While this is an impressive feat it doesn't get there for me on
either front, compared to what's available out there. So unless there was a
very specific reason not to resort to an actual font and/or graphics, I
wouldn't consider this one.

~~~
henpa
Brazil's flag looks really weird. I would say it's unusable...

------
rbosinger
It seems really well done. However I can't help but think "is this really a
use case for CSS; or more of a neat hack?". Is that why you're asking if it's
worth continuing?

~~~
cabmaddux
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. Maybe there would be a use case for the simple
icons and icons that would really benefit from coloring individual elements
(hence the flags), but I think there are definitely plenty of drawbacks and
it's pretty hacky in some places.

I also don't have a great understanding of some of the technical drawbacks and
compatibility issues that have been brought up here, so this HN conversation
has been an enormous help.

I think you've hit on my main question. Thanks for the feedback and for taking
a look!

------
Gyonka
Oh yes absolutely. Theses are fantastic icons, really well done man.

~~~
cabmaddux
Thanks very much, feels good to hear they hold up!

------
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

[http://nicolasgallagher.com/pure-css-gui-
icons/demo/](http://nicolasgallagher.com/pure-css-gui-icons/demo/)

[http://saeedalipoor.github.io/icono/](http://saeedalipoor.github.io/icono/)

------
jbhatab
I'm going to be completely honest as a UI/UX developer. I already feel
completely overwhelmed with viable and awesome options. If you aren't heavily
using this, at least make sure it isn't interfering with your life. This has
nothing to do with what you've done, just how I feel about more icon libraries
in general.

------
turshija
Really nice icons, good job !

One suggestion for animated icons: add "animated" and "stopped" states if you
didn't already.

~~~
cabmaddux
Thanks! I've tested "stopped" states and have it on my ToDo list, but need to
just take a moment and get it done.

------
Retr0spectrum
Some of the currencies look a bit off for me:
[http://i.imgur.com/GhjPBr7.png](http://i.imgur.com/GhjPBr7.png)

I'm using Firefox on Arch. I guess it could be something to do with me not
having the right fonts installed.

~~~
cabmaddux
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 create the central shape with the 3 available
elements. May need to scratch them until I can.

Thanks for taking a look at it!

------
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, white, red and not the other way around.

~~~
sejje
I do not find the green of Italy indistinguishable from the blues. Maybe you
should take a color-blind test (seriously, not being a jackass).

------
j29h
Nice work. But your german and french flags have the wrong order of colors.

------
cturhan
Continue Cabell, these are very nice set of icons with a small file size.

------
teamhappy
Quick PSA: The audio player on the site is an actual audio player.

------
dflock
Nice - although they break up a bit if you zoom the page, sadly.

------
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.

------
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.

~~~
cabmaddux
Definitely good for working on a few weird CSS oddities and helped me get
better acquainted with GitHub and Bower. I figured being able to work with
individual elements within the icon might be a plus over icon fonts, but
definitely not as reliable. Otherwise, I also couldn't come up with much over
SVG either. Thanks for the feedback!

------
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, simply set the icons border color in your CSS, like
so: .lb- _, .lb-_ ::before .lb-*::after

could you use border-color:inherit on the :before and :after pseudo-elements,
so it's just a single selector change to change the color?

~~~
cabmaddux
Wow, that makes a ton of sense, definitely cleaner than what I've got going
now. There are plenty of places to clean it up, but that would be a big one.

Thanks!

------
namelezz
Can you make a bat signal icon with animation?

------
bg0
This is awesome! If there wasn't a compatibility issue, i'd use this
immediately.

------
jbverschoor
Love it. Also removed bloat bc you can easily kick out icons you're not using.

------
wereHamster
The swiss flag should be square.

~~~
cabmaddux
True, thanks for catching that! I'll fix it up.

~~~
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 the cross. The class for the netherlands
shouldn't be lb-flag-holland.

------
theklr
keep it going. They look great.

------
akldjlafkjalfk
I like the flags, but wanted to the colour of some flags issue too.

------
ravitation
These look amazing! Keep up the awesome work! I love CSS icons.

------
butifanu
Great work! Definitely worth continuing.

------
impish19
This is very cool

------
skynetv2
nice. lot of work!

------
maxxxcohen
These so called icons are not even images. What's the point if you cant save
them do your hard disk ????

