Say hello to Octicons

https://github.com/blog/1106-say-hello-to-octicons

by Fluxx • 14 years ago

253 135 14 years ago

swanson• 14 years ago

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• 14 years ago

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

technoweenie• 14 years ago

They're for GitHub use only.

xbryanx2• 14 years ago

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.

jerf• 14 years ago

Font icons. I really don't see the appeal. They seem guaranteed to get this comment, no matter how good at icons you are.

pak2• 14 years ago

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.

dedene• 14 years ago

I agree also. Just too little contrast and color... I like the icons on buttons etc, but not for the file browser or the activity feed icons.

xbryanx2• 14 years ago

Interesting...the folders and files are now different colors for me. Different than when I first left this comment. Still not high enough contrast IMO, but a step in the right direction.

onetwothreefour• 14 years ago

Bring back the yellow folder icons!

Also, the entire design has terrible contrast. It's just dark on dark on dark. And every color has been stripped out.

Ugh.

platzhirsch• 14 years ago

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

wickedchicken2• 14 years ago

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

azakai2• 14 years ago

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

wickedchicken2• 14 years ago

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

ngokevin• 14 years ago

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.

huhtenberg2• 14 years ago

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.

pirateking• 14 years ago

I have to upvote this unfortunately. I visited the Github site this morning for the first time in a while, and encountered the new icons. The new book, notifications, and door icons were not immediately obvious to me and I had to hover over to see what they were. I guessed what the wrench represented, but due to the uncertainty caused by the other icons, I had to double check what it was for as well. I actually didn't even realize that the icon with a "+" on it was a book.

jonursenbach• 14 years ago

FWIW, the icons you have problems with have always been in use on Github.

Pewpewarrows• 14 years ago

No, they haven't. GitHub only recently changed their top toolbar layout to include those icons, and today expanded them with even more indistinguishable-at-a-glance ones.

AznHisoka• 14 years ago

I don't like em either, but they're giving me free icons I can use for my website, so I'm all good!

SkyMarshal2• 14 years ago

Does it matter if they're free if you don't like them?

daxelrod• 14 years ago

Sorry, but I don't think they're giving you free icons to use for your website.

The article says Octicons are "a custom icon font for use on GitHub.com and GitHub products". In their companion Making Of post, they answer a question about licensing [1] by saying "The font is for GitHub use only." [2].

[1] https://github.com/blog/1135-the-making-of-octicons#comment-...

[2] https://github.com/blog/1135-the-making-of-octicons#comment-...

kijin3• 14 years ago

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• 14 years ago

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.

cemregr• 14 years ago

Can you tell me what other redesigns Github has done feel undesigned? I personally think Github has a pretty great design team.

zachanker• 14 years ago

In addition they changed the private repo indicator so it's no longer a very obvious yellow background, but a single label that says "PRIVATE".

It was actually useful to have a very obvious indicator that your repo was private and nobody else could see it.

cookiecaper• 14 years ago

Interestingly it seems that "real designers" are whomever you like the most. It seems mostly to be a matter of taste.

vailripper• 14 years ago

Agreed. I use 16px icons in my projects. Comparing these icons to the Glyphicons I'm using currently, the glyphicons are vastly more clear, especially at the smaller size.

exogen• 14 years ago

It's unfortunate, because from a technical and aesthetic standpoint, these icons are mostly rock solid, and they deserve some praise for that.

But from a human/usability standpoint (what actually matters), I agree that they are indeed a failure. Let's hope they're ready to use that technical prowess to iterate.

Chris_Newton2• 14 years ago

But from a human/usability standpoint (what actually matters), I agree that they are indeed a failure.

From a human/usability standpoint, most icons used in user interfaces are failures.

Not sure you believe me? Quick! Name five icons you often use in a piece of software you use regularly: your browser, IDE, spreadsheet, graphics package, whatever.

Now name five more.

If you’re like most people, you probably came up with the first five easily enough. Back, refresh, stop, home, forward. Save, print, bold, cut, paste. But by the time you were getting toward ten, were you starting to struggle?

Now consider that many of these applications line up rows of 10, 20, or even more icons, which all look rather non-descript and blurry at typical sizes anyway. Some applications have several such rows, some at different sizes, some horizontal, some vertical. That’s an awful lot of screen space for something that most users won’t use, at least not without doing the mouse-hover-tooltip-no-it’s-not-that-one-maybe-it’s-the-one-over-there thing.

Oh, and here’s the kicker: of the icons that do get widely used, only a tiny number are truly iconic pictures that are recognisable! A lot are just an arbitrary marker in a predictable position, and it’s that context that the user recognises.

southpolesteve• 14 years ago

The technical implementation is interesting, but from a usability perspective, I found these icons to be pretty terrible

SkyMarshal2• 14 years ago

>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

Great point, especially about using + for new. They don't need to abstract the concept of a repository, they just need to abstract the concept of the Create/New action.

Their users will of course know it means to create a new repository, rather than a MS Word Document, email, sandwich, or whatever, simply based on context.

They've gotten into their heads that they need to create a new design language for version control concepts. And perhaps that's true for the Fork and Merge buttons, which are actions unique to version control, but not for everything. Create, Logoff, Notifications, etc. are not unique to version control at all. Just reuse what everyone is familiar with for those.

kstenerud• 14 years ago

I dunno. They look fine to me. The book will take a bit of getting used to (what icon would better represent a repository anyway?). The rest just sounds like nit-picking.

kjhughes• 14 years ago

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• 14 years ago

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

Alex3917• 14 years ago

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

agwa4• 14 years ago

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• 14 years ago

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

lloeki• 14 years ago

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

ori_b3• 14 years ago

The alternative is having sites select fonts that hurt my eyes. I want a consistent experience across the web.

smackfu• 14 years ago

The site uses a font choice to change how the site works, which is pretty much conflicting with the entire concept of a style sheet.

gdubs• 14 years ago

So if, say, an older user forces all text to be large and it renders a site unreadable, you would blame the user?

fusiongyro• 14 years ago

Fonts are not behavior. When the web was made of pages and style was secondary to content, this wasn't a problem.

vsl2• 14 years ago

Err, yes, I do blame the site for abusing HTML. If they misuse text markup to represent what is semantically an image, how is that my fault? HTML has <img> for a reason. There's perfectly suitable markup for text and another for images: using the former for the latter is no less idiotic than doing it the other way around.

This fad is supremely annoying.

untog• 14 years ago

<img> tags at least have the alt attribute.

And <a> tags have the title attribute.

agwa4• 14 years ago

<img> has the title attribute too, but title is meant for displaying additional information via a tooltip. alt is for alternative text to be used in place of the image.

Does any screen reader actually read the value of a title attribute on a link containing text? I doubt it. Instead it would descend into the <a> tag and try to read the text therein.

agwa4• 14 years ago

I've given it some thought and GitHub should be able to make this more accessible by doing something like this:

    <span class="mini-icon notifications"><span>Notifications</span></span>

Using media queries, serve CSS like this only to screen-like media (i.e. not screen readers):

    .mini-icon.create:before {
       content: "\f030";
    }
    .mini-icon span {
       display: none;
    }

Hopefully they'll adopt something like this, though it wouldn't help people like me who just want a consistent font across the Web.

notJim• 14 years ago

I think screen readers actually respect display:none. I believe the preferred solution is to use a large, negative text-indent.

secoif• 14 years ago

If CSS and browsers weren't so broken and there was a convenient, semantic alternative, I'm sure github would have used that instead. Unfortunately icon fonts are one of the most convenient and compatible 'hacks' to render vector icons in the current climate.

In a perfect world you'd be right, or perhaps even in a world where IE hadn't held the entire Internet back 10 years.

fleeno• 14 years ago

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• 14 years ago

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

why-el• 14 years ago

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.

pak2• 14 years ago

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.

guywithabike• 14 years ago

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

MartinCron• 14 years ago

Or, they had 8 people collaborating on the design and implementation of something important. Do you dare to claim that all 8 of these people did nothing else?

sunir• 14 years ago

Careful. I count 5. Some people did more than one thing.

brendn• 14 years ago

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.

angerman• 14 years ago

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

scottbruin• 14 years ago

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

zobzu• 14 years ago

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.

pnathan• 14 years ago

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.

pooriaazimi2• 14 years ago

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

reledi3• 14 years ago

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.

pooriaazimi2• 14 years ago

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?

nyrb• 14 years ago

Codeshelver looks nice. I have been using Gitmarks for a while and its amazing.

https://chrome.google.com/webstore/detail/dbjampjhnhcfjgcapn...

igorgue• 14 years ago

[workaround] Use gitmarks: http://farmckon.github.com/gitmarks_2/

nuclear_eclipse• 14 years ago

I'd like to see something similar to Ohloh's "Uses This" feature.

memset• 14 years ago

Agreed. A nice "bookmark" feature. I think a book would be a great affordance for bookmark but that seems to be taken already by "new repository"

spullara• 14 years ago

Amusingly, it is the same behavior as the Facebook like button, except that Github's feed algorithm doesn't filter out things you likely don't care about.

DannoHung2• 14 years ago

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

rsanheim• 14 years ago

We disabled comments from new feature posts.

DannoHung2• 14 years ago

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

irrationalfab• 14 years ago

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)

Sephr• 14 years ago

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• 14 years ago

http://en.wikipedia.org/wiki/Svg#Support_for_SVG_in_web_brow...

petercooper2• 14 years ago

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.

masklinn• 14 years ago

> Why isn't this SVG?

SVG is a terrible technology with absolutely no support for scaling to small sizes (no hinting).

jvc262• 14 years ago

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• 14 years ago

It looks like this type: http://www.amazon.com/Alvin-Co-DRAFT-MATIC-PENCIL/dp/B001DKI...

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

jvc262• 14 years ago

That is indeed it - thanks a lot!

duncanbojangles• 14 years ago

I had the same reaction upon seeing that photo. My dominant hand has been in a cast for four months, so I've become left handed. The new dominant hand is rather picky about writing utensils, and this one looks like it fits the bill nicely.

bane2• 14 years ago

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• 14 years ago

Isn't SVG universal?

bane2• 14 years ago

It should be but

http://en.wikipedia.org/wiki/Svg#Support_for_SVG_in_web_brow...

jackfoxy• 14 years ago

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

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

radley• 14 years ago

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.

andypants• 14 years ago

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.

coleifer• 14 years ago

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.

kaezarrex• 14 years ago

I prefer no icons... https://gist.github.com/2648857

FuzzyDunlop• 14 years ago

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.

madmaze• 14 years ago

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

shocks2• 14 years ago

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• 14 years ago

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

shocks2• 14 years ago

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

jonah• 14 years ago

seems to be a typo, there's: .tag-create and .tab-delete

evoxed• 14 years ago

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

mdehaan• 14 years ago

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

finalword• 14 years ago

hello, octicons.

ryanflorence• 14 years ago

You guys are worse than your own customers.

Site looks great.

edwardhotchkiss• 14 years ago

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

mparlane• 14 years ago

And goodbye to IE8 it seems.

Bogdanp• 14 years ago

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.

yuanyan• 14 years ago

Octicons for Twitter Bootstrap: http://madscript.com/Octicons

Say hello to Octicons

Related Stories