9 ms·

Say hello to Octicons

253 points by Fluxx 14y ago

swanson 14y 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 14y 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 https://github.com/styleguide/css/1.0
- technoweenie 14y ago
  They're for GitHub use only.
xbryanx 14y 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 14y 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.
- pak 14y 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 14y 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.
- xbryanx 14y 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 14y 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 14y ago
I cannot believe my repositories have no smiles anymore, I don't want to live on this planet anymore.
wickedchicken 14y ago
Apple and Windows, doesn't seem to be a Linux :/
- azakai 14y ago
  ? I'm on Linux and github's new font works fine. Looks nice.
  - deleted 14y ago
    [deleted]
  - wickedchicken 14y ago
    They have glyphs for both Apple and Windows but not Linux.
    - azakai 14y ago
      Sorry, I misunderstood before. That is indeed sad.
ngokevin 14y 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.
huhtenberg 14y 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 14y 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 14y ago
  FWIW, the icons you have problems with have always been in use on Github.
  - Pewpewarrows 14y 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 14y 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!
kjhughes 14y 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 14y 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 14y ago
I was hoping this was going to be about a new elementary particle.
agwa 14y 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 14y ago
  So you force a behavior through your browser but when it doesn't work you blame the site? Ok...
  - lloeki 14y 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 http://www.fileformat.info/info/unicode/char/f003/index.htm
    - 54mf 14y ago
      All the icons lie in private use areas, specifically to avoid abuse.
      - TazeTSchnitzel 14y ago
        Abuse?
        chc 14y ago
        As stated by the grandparent: > Unicode code points do have names and standardized meanings, so it's not a good idea to abuse them
  - 14y ago
fleeno 14y 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 14y 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 http://bit.ly/GFB0XD
why-el 14y 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.
meanJim 14y ago
I thought the new icons looked beautiful..
pak 14y 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 14y ago
For the record: it took 8 people to design and implement their new icons. 8 people.
- MartinCron 14y 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 14y ago
  Careful. I count 5. Some people did more than one thing.
- brendn 14y 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 14y ago
Is it just me or does the new exit icon with the door not align well with the other icons?
- scottbruin 14y ago
  Perhaps because it's clearer than the rest? But yah the weights are off and it seems sharper.
zobzu 14y 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.
deleted 14y ago
[deleted]
pnathan 14y 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.
pooriaazimi 14y 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).
- reledi 14y 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 https://www.codeshelver.com) but I'd like to see GitHub fix the problem.
  - pooriaazimi 14y 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?
    - reledi 14y ago
      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.
  - nyrb 14y ago
    Codeshelver looks nice. I have been using Gitmarks for a while and its amazing. https://chrome.google.com/webstore/detail/dbjampjhnhcfjgcapnkkbolmjghhpiio https://chrome.google.com/webstore/detail/dbjampjhnhcfjgcapn...
    - reledi 14y ago
      Thanks for the link, Gitmarks looks nice as well.
DannoHung 14y ago
Uh... did github just axe blog comments from all non-drinkup posts?
- rsanheim 14y ago
  We disabled comments from new feature posts.
  - DannoHung 14y ago
    But you deleted all of the old comments too. That stinks, there was good stuff in a bunch of those comment threads.
irrationalfab 14y 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 14y 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 14y ago
  http://en.wikipedia.org/wiki/Svg#Support_for_SVG_in_web_browsers http://en.wikipedia.org/wiki/Svg#Support_for_SVG_in_web_brow...
  - petercooper 14y 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.
    - dudus 14y ago
      There are pollyfils to degrade SVG into VML or een flash for ie8, ie7 and ie6. https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Brow... I don't mean that it's pretty. I'm just saying that it's possible
- masklinn 14y ago
  > Why isn't this SVG? SVG is a terrible technology with absolutely no support for scaling to small sizes (no hinting).
jvc26 14y 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 14y ago
  It looks like this type: http://www.amazon.com/Alvin-Co-DRAFT-MATIC-PENCIL/dp/B001DKIWM4 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!
  - jvc26 14y ago
    That is indeed it - thanks a lot!
- duncanbojangles 14y 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.
bane 14y 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 14y ago
  Isn't SVG universal?
  - bane 14y ago
    It should be but http://en.wikipedia.org/wiki/Svg#Support_for_SVG_in_web_browsers http://en.wikipedia.org/wiki/Svg#Support_for_SVG_in_web_brow...
    - petercooper 14y ago
      http://caniuse.com/#search=svg 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.
jackfoxy 14y 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/visual-studio-11-user-interface-updates-coming-in-rc.aspx 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 14y 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 14y 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 14y 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 14y ago
I prefer no icons... https://gist.github.com/2648857 https://gist.github.com/2648857
FuzzyDunlop 14y 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 14y 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
shocks 14y 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 14y 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. ;)
  - shocks 14y ago
    My comment on their "Making of" blog post expressing my criticisms was deleted without reply, how friendly!
jonah 14y ago
seems to be a typo, there's: .tag-create and .tab-delete
evoxed 14y 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 14y 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 14y ago
hello, octicons.
ryanflorence 14y ago
You guys are worse than your own customers. Site looks great.
edwardhotchkiss 14y ago
Has anyone seen this in FF 12? This is one branch that shouldn't have been merged.
mparlane 14y ago
And goodbye to IE8 it seems.
Bogdanp 14y 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.
catchmrbharath 14y ago
It doesn't seem to work on firefox 12. Do you know where I can file a bug report? It is painful to look at arbitrary symbols on the site :)
yuanyan 14y ago
Octicons for Twitter Bootstrap: http://madscript.com/Octicons http://madscript.com/Octicons

253 points by Fluxx 14y 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 14y 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 https://github.com/styleguide/css/1.0
technoweenie 14y ago
They're for GitHub use only.

xbryanx 14y 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 14y 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.
pak 14y 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 14y 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.
xbryanx 14y 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 14y 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 14y ago

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

wickedchicken 14y ago

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

azakai 14y ago
? I'm on Linux and github's new font works fine. Looks nice.
- deleted 14y ago
  [deleted]
- wickedchicken 14y ago
  They have glyphs for both Apple and Windows but not Linux.
  - azakai 14y ago
    Sorry, I misunderstood before. That is indeed sad.

ngokevin 14y 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.

huhtenberg 14y 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 14y 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 14y ago
FWIW, the icons you have problems with have always been in use on Github.
- Pewpewarrows 14y 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 14y 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!

kjhughes 14y 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 14y 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 14y ago

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

agwa 14y 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 14y ago
So you force a behavior through your browser but when it doesn't work you blame the site? Ok...
- lloeki 14y 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 http://www.fileformat.info/info/unicode/char/f003/index.htm
  - 54mf 14y ago
    All the icons lie in private use areas, specifically to avoid abuse.
    - TazeTSchnitzel 14y ago
      Abuse?
      - chc 14y ago
        As stated by the grandparent: > Unicode code points do have names and standardized meanings, so it's not a good idea to abuse them
- 14y ago

fleeno 14y 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 14y 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 http://bit.ly/GFB0XD

why-el 14y 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.

meanJim 14y ago

I thought the new icons looked beautiful..

pak 14y 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 14y ago

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

MartinCron 14y 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 14y ago
Careful. I count 5. Some people did more than one thing.
brendn 14y 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 14y ago

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

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

zobzu 14y 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.

deleted 14y ago

[deleted]

pnathan 14y 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.

pooriaazimi 14y 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).

reledi 14y 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 https://www.codeshelver.com) but I'd like to see GitHub fix the problem.
- pooriaazimi 14y 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?
  - reledi 14y ago
    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.
- nyrb 14y ago
  Codeshelver looks nice. I have been using Gitmarks for a while and its amazing. https://chrome.google.com/webstore/detail/dbjampjhnhcfjgcapnkkbolmjghhpiio https://chrome.google.com/webstore/detail/dbjampjhnhcfjgcapn...
  - reledi 14y ago
    Thanks for the link, Gitmarks looks nice as well.

DannoHung 14y ago

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

rsanheim 14y ago
We disabled comments from new feature posts.
- DannoHung 14y ago
  But you deleted all of the old comments too. That stinks, there was good stuff in a bunch of those comment threads.

irrationalfab 14y 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 14y 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 14y ago
http://en.wikipedia.org/wiki/Svg#Support_for_SVG_in_web_browsers http://en.wikipedia.org/wiki/Svg#Support_for_SVG_in_web_brow...
- petercooper 14y 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.
  - dudus 14y ago
    There are pollyfils to degrade SVG into VML or een flash for ie8, ie7 and ie6. https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Brow... I don't mean that it's pretty. I'm just saying that it's possible
masklinn 14y ago
> Why isn't this SVG? SVG is a terrible technology with absolutely no support for scaling to small sizes (no hinting).

jvc26 14y 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 14y ago
It looks like this type: http://www.amazon.com/Alvin-Co-DRAFT-MATIC-PENCIL/dp/B001DKIWM4 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!
- jvc26 14y ago
  That is indeed it - thanks a lot!
duncanbojangles 14y 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.

bane 14y 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 14y ago
Isn't SVG universal?
- bane 14y ago
  It should be but http://en.wikipedia.org/wiki/Svg#Support_for_SVG_in_web_browsers http://en.wikipedia.org/wiki/Svg#Support_for_SVG_in_web_brow...
  - petercooper 14y ago
    http://caniuse.com/#search=svg 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.

jackfoxy 14y 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/visual-studio-11-user-interface-updates-coming-in-rc.aspx 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 14y 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 14y 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 14y 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 14y ago

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

FuzzyDunlop 14y 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 14y 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

shocks 14y 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 14y 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. ;)
- shocks 14y ago
  My comment on their "Making of" blog post expressing my criticisms was deleted without reply, how friendly!

jonah 14y ago

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

evoxed 14y 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 14y 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 14y ago

hello, octicons.

ryanflorence 14y ago

You guys are worse than your own customers. Site looks great.

edwardhotchkiss 14y ago

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

mparlane 14y ago

And goodbye to IE8 it seems.

Bogdanp 14y 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.

catchmrbharath 14y ago

It doesn't seem to work on firefox 12. Do you know where I can file a bug report? It is painful to look at arbitrary symbols on the site :)

yuanyan 14y ago

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