
Say hello to Octicons - Fluxx
https://github.com/blog/1106-say-hello-to-octicons
======
huhtenberg
Good idea, but, sorry, don't like 'em. Neither the execution nor the
conceptualization.

The execution is too detailed. Details, regardless of how pixel-perfect they
are, do blur upon quick glance, and the more details there are, the more it
looks like a gray blob. The execution is also inconsistent - why the book is
3D, but the rest is flat? Except for the coffee mug that is neither.

The conceptualization is off too. The fact that they need to _explain_ an icon
is a red flag. Why book? They answer that with 5 lines of text. Why wrench and
a screwdriver, when a gear is a visually simpler icon that is widely
understood? Why the Logout arrow implies that someone walks _in_ through the
door? Why is the letter A transmitting, when it's actually about _receiving_?

So not to sound like a complete ass, here's what I would've used instead - a
gear for preferences, a "power off/on" symbol for logout, a simple blank page
with a plus sign for "new", some sort of inbox or even an envelope for
"notifications". Just keep it simple and don't overthink.

~~~
kijin
Completely agreed. The icons are not only excessively detailed for their small
size, but also sit rather awkwardly in relation to the rounded-rectangle
container. The top right corner of every Github page now looks like the
notification area of an old Linux desktop with an amateur-designed theme.

Every minor redesign Github has released over the last couple of years
increasingly reek of "designed by programmers". But Github deserves better
than that. Please get real designers.

~~~
amirmc
The redundancy is a little irritating.

I could tell what buttons did simply from the text (and they were useful) e.g
'unwatch', 'your fork' etc. Now there's more space taken up with the text
_and_ the icon.

The icons don't seem to provide _additional_ info in any way. Perhaps that's
because Github would like to switch from text to icons eventually (with
text+icons in the interim)? I hope not, as it would mean way too many things
for people (esp novices) to get their heads around.

~~~
kijin
> _Perhaps that's because Github would like to switch from text to icons
> eventually?_

Like Gmail's new icon-only interface? I hope not! It's difficult enough for
people to figure out what Gmail's icons represent.

~~~
regularjack
You can set Gmail's Button labels to "Text" under Settings -> General.

------
agwa
I have Firefox configured to force the same font face across all sites (I love
the consistency this gives me, and also some some sites are extremely abusive
in their font selection) so this doesn't work for me. The "icons" show up as
unknown Unicode characters. Not cool.

This seems like the wrong approach - shouldn't characters have semantic
meaning? It also doesn't seem accessible. Screen readers wouldn't know what to
do with these invented characters. <img> tags at least have the alt attribute.

~~~
brcrth
So you force a behavior through your browser but when it doesn't work you
blame the site? Ok...

~~~
lloeki
Unicode code points do have names and standardized meanings, so it's not a
good idea to abuse them.

Hopefully the 'create' one uses f003, which apparently lies in
_PRIVATE_USE_AREA_ [0]

    
    
        .mini-icon.create::before {
           content: "\f003";
        }
    

[0] <http://www.fileformat.info/info/unicode/char/f003/index.htm>

~~~
54mf
All the icons lie in private use areas, specifically to avoid abuse.

~~~
TazeTSchnitzel
Abuse?

~~~
chc
As stated by the grandparent:

> _Unicode code points do have names and standardized meanings, so it's not a
> good idea to abuse them_

------
pooriaazimi
What GitHub needs is a 'like' button, not new icons (so we don't have to
`watch` projects we find interesting and want to somehow remember _just in
case_ \- which results in thousands of commits and pushes (every hour) in our
news feed we absolutely don't care about).

~~~
reledi
Agreed. The signal to noise ratio in my newsfeed is very low because of it.
There exists some workarounds (e.g. <https://www.codeshelver.com>) but I'd
like to see GitHub fix the problem.

~~~
pooriaazimi
I didn't know about CodeShelver! Thank you.

I'll give it a try in a few days, but just a question: what happens if
www.codeshelver.com dies tomorrow (assuming they save shelved repos on their
server) or their Safari extension be buggy and it removes/corrupts all my
precious repos (assuming it's the extension that saves the repos)? Will I lose
everything?

~~~
reledi
I can't answer your question because I don't know about the inner workings of
CodeShelver, but it's safest to assume you would lose everything (going off
the assumption that they store the info on their own servers).

You should also check out Gitmarks. Someone posted the link in a reply to my
earlier comment.

------
Sephr
Why isn't this SVG? Font icons are only applicable when there is actually an
appropriate corresponding Unicode character for the icon, as text is supposed
to be selectable/copyable, and display fine (albeit in a different typeface)
if I turn off web fonts and have full Unicode coverage. Some of the icons that
Github implements are in Unicode, yet they don't even use the characters for
those.

For an example of when it's appropriate to use a custom font for an icon, I
use a custom font for U+1F50D Left-Pointing Magnifying Glass in the search
button on my website. Github uses U+F22E [INVALID] instead for their search
icon.

~~~
crazygringo
[http://en.wikipedia.org/wiki/Svg#Support_for_SVG_in_web_brow...](http://en.wikipedia.org/wiki/Svg#Support_for_SVG_in_web_browsers)

~~~
petercooper
Every major current generation browser _and_ last generation browser supports
SVG images except IE 8. So IE 8 users just wouldn't see the icons - not a big
loss since I suspect IE 8 users make up a tiny amount of the user base.

~~~
dudus
There are pollyfils to degrade SVG into VML or een flash for ie8, ie7 and ie6.

[https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-
Brow...](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-
Polyfills)

I don't mean that it's pretty. I'm just saying that it's possible

------
pak
I appreciate that these will scale better than images, but I never grokked the
icons in the top right corner. To me, a repository isn't much like a "book",
and I still remember hunting for the "log out" link in frustration before
realizing it was the door with an arrow. Since you've pretty much pegged the
header at ~900px wide, I still think text links would be more usable and you
have the horizontal room for it.

That being said, since it seems like you're incorporating these metaphors into
other parts of the site--like I notice the book icon by the repo name now--
maybe the metaphors will eventually stick. But in the meanwhile it has been a
little confusing.

------
kjhughes
_Some of the icons on our site have been the same since we launched 4 years
ago._

Hmm. Icons aren't like underwear in needing to be changed regularly.

Further, I'm not immediately able to interpret many of the visuals. E.g. With
some hovering effort, I see that right arrow away from a book supposed to
stand for "Log Out" and, oh, it's an open door, not an open book. Not sure if
these were meant to be shared (license?) but those so interested should be
sure to checkout Font Awesome too.

I do love GitHub. New icons? Meh.

~~~
loeschg
Haha, that's along the lines of what I was thinking. Meh. I sometimes wonder
if Github could post something about feeding their company pet and make it to
the top of HN. :)

------
xbryanx
The file view icons seem way too washed out. I'd like more visual contrast so
that I can see what is a folder and what is a file. Not all of us have 20
something eyeballs duders.

~~~
pak
Agreed, color is the most immediately recognizable thing about an object and
this is just as bad as when Lion washed out the folder colors. It looks more
minimalist/modern but is less usable. Even low-saturation colors would be
nice. You could do this with font icons just by printing them in slightly
different colors (like a terminal, sigh).

Edit: I could be nuts, but they are printing in slightly different colors now,
whereas just an hour ago they were all gray. Somebody at github just made my
day.

------
why-el
I personally did not like the colors on the repository icons. Grey just doesnt
strike me as a color that inspires liveliness and energy. I liked the yellow
better. Please keep some color around the repo list, thats what I care about
most and I think a lot of people do too.

------
bane
This speaks to an overall bigger problem with browsers, the need for a
universal vector graphics format. The fact that designers are resorting to
fonts to try and get resizable art assets is not a good thing IMHO.

~~~
eru
Isn't SVG universal?

~~~
bane
It should be but

[http://en.wikipedia.org/wiki/Svg#Support_for_SVG_in_web_brow...](http://en.wikipedia.org/wiki/Svg#Support_for_SVG_in_web_browsers)

~~~
petercooper
<http://caniuse.com/#search=svg> is a more visual look at this.

Every major current _and_ previous generation browser supports SVG images
except IE 8. IE 8 users just wouldn't see the icons - a reasonably graceful
degradation.

------
radley
The problem is that they didn't follow convention: they didn't think through
the icons' purpose & over-did the design. Create New should just be + sign,
Account Settings should be user head, and so on.

I like thinking up icons just like any advanced UI/UX guy, but rule number #1:
if there's a standard you use it. Even if that means using something as
archaic as floppy disk for Save.

------
swanson
Is there a license on these? I poked around for a few minutes but couldn't
find anything. Seems like a generally useful icon set for any web-apps related
to software or developers.

~~~
biot
Agreed. Looking through their styleguide[0] it looks quite conceptually
similar to Twitter Bootstrap and would be useful as a starting point for site
development.

[0] <https://github.com/styleguide/css/1.0>

------
jvc26
Guess its a weird question but does anyone know what the make of propelling
pencil is in the photo of their drafting process? I'd be keen to lay my hands
on one!

~~~
libraryatnight
It looks like this type: [http://www.amazon.com/Alvin-Co-DRAFT-MATIC-
PENCIL/dp/B001DKI...](http://www.amazon.com/Alvin-Co-DRAFT-MATIC-
PENCIL/dp/B001DKIWM4)

But that's just me doing my best to read the side of the pencil in the photo,
but it looks like the one!

~~~
jvc26
That is indeed it - thanks a lot!

------
fleeno
Did they make that drawing just for the blog post?

I don't know things work at GitHub, but our ideas are scrawled on random
papers, whiteboards, and windows. We also never seem to have a perfectly posed
pencil anywhere in sight.

Either way, I still love GitHub!

------
brutuscat
Is it me or they "changed" the icons 2-3 times in last 6 months? I don't want
to disrespect you guys, you are doing a great job :D, but github currently
really needs some form of deck to track down project dependencies activity and
people activity too. I already started something here <http://bit.ly/GFB0XD>

------
pnathan
Going against the grain, I guess. I like them, more or less. I particularly
like the color-coding in the newsfeed.

However, I generally favor text options: if there was a no-icon option I'd
probably choose that over icons.

My nits:

Advanced search looks like a settings icon, though.

Admin-tools doesn't seem to relate. (A 60s rocket ship? huh?)

Notification looks like an A with some sound at small resolution instead of
the radio tower.

------
irrationalfab
It looks like a regression (it is the first time that I say it with a
redesign). From the technical point the might be great, but they are more bold
and result in a pages that look less clean.

However I don't care about the icons so much, what I want is:

\- better notifications / activity stream

\- like button

\- improved diff (highlight only the changes inline if a line changed
slightly)

------
coleifer
Judging by the number of folks listed who contributed to this (misguided)
effort, I'd call this classic design by committee. Why not stick with the
visual tropes we've come to know and instantly recognize? Instead of spending
so much time designing these icons they should've read up on semiotics.

------
FuzzyDunlop
I think this quote sums up some of the thinking behind this:

 _"Some would say that a repository is storage — a place where you store your
code — somewhat like a box."_

So why isn't the icon a box? Why instead spend the rest of the paragraph
justifying the book icon? It might be understood well enough by the Github
designers, but the metaphor isn't universal enough to be recognisable at a
glance.

This is made worse because the icon for 'readme' and 'wiki' are _also_ books.
That could be confusing without the text.

The other example is the icons for watching. 'Add' tends to be represented as
a plus icon. In this case 'watching' has a plus icon in it, while 'unwatch'
has a cross icon. This doesn't appear to make sense.

One might wonder why, when there are present and available dichotomies (open
eye, shut eye), there's such a mix and match of metaphors.

------
ngokevin
Elements aren't lining up and running into each other. Some icons are
oversized and overall the page looks lot more cluttered. Adding even more
colors doesn't help the fact.

There's always going to be pushback when doing a UI revamp, and today I'll be
that guy. Running Linux/Nightly.

------
shocks
We should tell them we don't like it instead of just commenting in a HN
thread.

Tweet them, or something.

Bitbucket looks great still.

~~~
kylemaxwell
I'm not a fan of Bitbucket for various reasons, but your point is well-taken -
I tweeted them just now myself:

>generally like the octicons, except (a) some are too detailed, and (b) the
colored bkgrds are confusing. (still a fan!)

Then again, I'm pretty sure GitHubbers will be watching this thread. ;)

~~~
shocks
My comment on their "Making of" blog post expressing my criticisms was deleted
without reply, how friendly!

------
mdehaan
I believe you used to be able to click on the "forks" and "watchers" button to
see who is forked or watching. Now the button defaults to "unwatch" when
looking at the project page.

I find these new icons confusing as well. It took me a long time to figure out
the one icon was an eye with a "X" on it for "unwatch". Not sure why the
branches in "your fork" travel upwards as well, as I've never seen a source
control diagram do that.

And my default user/organization/project icon is no longer an octocat but a
book with a fork on it. I miss the octocat.

I think this is a classic problem when a graphic designer doesn't have enough
meaningful real work to do :)

------
guywithabike
For the record: it took 8 people to design and implement their new icons. 8
people.

~~~
brendn
Are you seriously bashing their icons based on the number of people on the
team? How can you pass any kind of judgement without knowing what went in to
planning, designing, testing, and deploying the change? If you think you could
do something similar with fewer resources, either go do it and show us, or
stop raining on someone else's parade.

------
Bogdanp
Aside from all the issues that were pointed out by everyone, since fonts on
Windows are rendered much more sharply than they are on OS X for example,
these look absolutely _terrible_ on Windows machines.

Edit: I have also noticed that they have removed the button to see the
watchers on a project (it's just a toggle button now). To see that list now
you either have to enter the URL directly or go on your dashboard and click on
the watchers icon there on whatever project you're looking for.

------
jackfoxy
Reminds me of the VS11 beta icons, although not quite as bad that. (The
promised VS11 RC icons are somewhat of an improvement. There must have been a
big outcry.
[http://blogs.msdn.com/b/visualstudio/archive/2012/05/08/visu...](http://blogs.msdn.com/b/visualstudio/archive/2012/05/08/visual-
studio-11-user-interface-updates-coming-in-rc.aspx))

I agree the idea is very good. Are flat icons a current design fad?

------
evoxed
Offtopic, but it's amazing to realize that Avalonstar is 11 years old! I guess
I was pretty small when it started but I remember following Brian's work I
guess as far back as my first computer purchase...

------
madmaze
With the new design I have issue reading the light gray text on the white
background. It looks like the line weight is set too thin.. at least this is
on Chrome & FF11 on Ubuntu 11.10

------
andypants
Did the watchers and forks buttons also change?

They just to just be an icon and a number, now I see an icon/text button.
Also, I can't see a list of watchers/forks by clicking on them now.

------
zobzu
To be perfectly honest the icons confused me. I only found "new repo" because
tere aren't many bbuttons so it's quick to go over each. I much prefer text.

------
yuanyan
Octicons for Twitter Bootstrap: <http://madscript.com/Octicons>

------
kaezarrex
I prefer no icons... <https://gist.github.com/2648857>

------
angerman
Is it just me or does the new exit icon with the door not align well with the
other icons?

~~~
scottbruin
Perhaps because it's clearer than the rest? But yah the weights are off and it
seems sharper.

------
edwardhotchkiss
Has anyone seen this in FF 12? This is one branch that shouldn't have been
merged.

------
DannoHung
Uh... did github just axe blog comments from all non-drinkup posts?

~~~
rsanheim
We disabled comments from new feature posts.

~~~
DannoHung
But you deleted all of the old comments too. That stinks, there was good stuff
in a bunch of those comment threads.

------
Alex3917
I was hoping this was going to be about a new elementary particle.

------
wickedchicken
Apple and Windows, doesn't seem to be a Linux :/

~~~
azakai
? I'm on Linux and github's new font works fine. Looks nice.

~~~
wickedchicken
They have glyphs for both Apple and Windows but not Linux.

~~~
azakai
Sorry, I misunderstood before.

That is indeed sad.

------
ryanflorence
You guys are worse than your own customers.

Site looks great.

------
mparlane
And goodbye to IE8 it seems.

------
jonah
seems to be a typo, there's: . _tag_ -create and . _tab_ -delete

------
platzhirsch
I cannot believe my repositories have no smiles anymore, I don't want to live
on this planet anymore.

------
finalword
hello, octicons.

