TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Say hello to Octicons

253 pointsby Fluxxabout 13 years ago

40 comments

huhtenbergabout 13 years ago
Good idea, but, sorry, don't like 'em. Neither the execution nor the conceptualization.<p>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.<p>The conceptualization is off too. The fact that they need to <i>explain</i> 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 <i>in</i> through the door? Why is the letter A transmitting, when it's actually about <i>receiving</i>?<p>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.
评论 #3949859 未加载
评论 #3949687 未加载
评论 #3950407 未加载
评论 #3950004 未加载
评论 #3950494 未加载
评论 #3950032 未加载
评论 #3949690 未加载
评论 #3949966 未加载
评论 #3949842 未加载
agwaabout 13 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.<p>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. &#60;img&#62; tags at least have the alt attribute.
评论 #3949864 未加载
评论 #3949691 未加载
评论 #3949742 未加载
评论 #3950406 未加载
pooriaazimiabout 13 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 <i>just in case</i> - which results in thousands of commits and pushes (every hour) in our news feed we absolutely don't care about).
评论 #3950193 未加载
评论 #3950568 未加载
评论 #3950358 未加载
评论 #3952271 未加载
评论 #3950403 未加载
Sephrabout 13 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.<p>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.
评论 #3952634 未加载
评论 #3950477 未加载
pakabout 13 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.<p>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.
kjhughesabout 13 years ago
<i>Some of the icons on our site have been the same since we launched 4 years ago.</i><p>Hmm. Icons aren't like underwear in needing to be changed regularly.<p>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.<p>I do love GitHub. New icons? Meh.
评论 #3949884 未加载
xbryanxabout 13 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.
评论 #3949785 未加载
评论 #3949886 未加载
评论 #3951456 未加载
评论 #3949860 未加载
评论 #3949659 未加载
why-elabout 13 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.
baneabout 13 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.
评论 #3950328 未加载
radleyabout 13 years ago
The problem is that they didn't follow convention: they didn't think through the icons' purpose &#38; over-did the design. Create New should just be + sign, Account Settings should be user head, and so on.<p>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.
swansonabout 13 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.
评论 #3949722 未加载
评论 #3950392 未加载
jvc26about 13 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!
评论 #3950316 未加载
评论 #3950850 未加载
fleenoabout 13 years ago
Did they make that drawing just for the blog post?<p>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.<p>Either way, I still love GitHub!
brutuscatabout 13 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 <a href="http://bit.ly/GFB0XD" rel="nofollow">http://bit.ly/GFB0XD</a>
pnathanabout 13 years ago
Going against the grain, I guess. I like them, more or less. I particularly like the color-coding in the newsfeed.<p>However, I generally favor text options: if there was a no-icon option I'd probably choose that over icons.<p>My nits:<p>Advanced search looks like a settings icon, though.<p>Admin-tools doesn't seem to relate. (A 60s rocket ship? huh?)<p>Notification looks like an A with some sound at small resolution instead of the radio tower.
irrationalfababout 13 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.<p>However I don't care about the icons so much, what I want is:<p>- better notifications / activity stream<p>- like button<p>- improved diff (highlight only the changes inline if a line changed slightly)
coleiferabout 13 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.
FuzzyDunlopabout 13 years ago
I think this quote sums up some of the thinking behind this:<p><i>"Some would say that a repository is storage — a place where you store your code — somewhat like a box."</i><p>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.<p>This is made worse because the icon for 'readme' and 'wiki' are <i>also</i> books. That could be confusing without the text.<p>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.<p>One might wonder why, when there are present and available dichotomies (open eye, shut eye), there's such a mix and match of metaphors.
ngokevinabout 13 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.<p>There's always going to be pushback when doing a UI revamp, and today I'll be that guy. Running Linux/Nightly.
shocksabout 13 years ago
We should tell them we don't like it instead of just commenting in a HN thread.<p>Tweet them, or something.<p>Bitbucket looks great still.
评论 #3951054 未加载
mdehaanabout 13 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.<p>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.<p>And my default user/organization/project icon is no longer an octocat but a book with a fork on it. I miss the octocat.<p>I think this is a classic problem when a graphic designer doesn't have enough meaningful real work to do :)
guywithabikeabout 13 years ago
For the record: it took 8 people to design and implement their new icons. 8 people.
评论 #3950023 未加载
评论 #3949885 未加载
评论 #3949914 未加载
Bogdanpabout 13 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.<p>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.
jackfoxyabout 13 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. <a href="http://blogs.msdn.com/b/visualstudio/archive/2012/05/08/visual-studio-11-user-interface-updates-coming-in-rc.aspx" rel="nofollow">http://blogs.msdn.com/b/visualstudio/archive/2012/05/08/visu...</a>)<p>I agree the idea is very good. Are flat icons a current design fad?
evoxedabout 13 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...
madmazeabout 13 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 &#38; FF11 on Ubuntu 11.10
andypantsabout 13 years ago
Did the watchers and forks buttons also change?<p>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.
zobzuabout 13 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.
yuanyanabout 13 years ago
Octicons for Twitter Bootstrap: <a href="http://madscript.com/Octicons" rel="nofollow">http://madscript.com/Octicons</a>
kaezarrexabout 13 years ago
I prefer no icons... <a href="https://gist.github.com/2648857" rel="nofollow">https://gist.github.com/2648857</a>
angermanabout 13 years ago
Is it just me or does the new exit icon with the door not align well with the other icons?
评论 #3950325 未加载
edwardhotchkissabout 13 years ago
Has anyone seen this in FF 12? This is one branch that shouldn't have been merged.
DannoHungabout 13 years ago
Uh... did github just axe blog comments from all non-drinkup posts?
评论 #3950927 未加载
Alex3917about 13 years ago
I was hoping this was going to be about a new elementary particle.
wickedchickenabout 13 years ago
Apple and Windows, doesn't seem to be a Linux :/
评论 #3949917 未加载
ryanflorenceabout 13 years ago
You guys are worse than your own customers.<p>Site looks great.
mparlaneabout 13 years ago
And goodbye to IE8 it seems.
jonahabout 13 years ago
seems to be a typo, there's: .<i>tag</i>-create and .<i>tab</i>-delete
platzhirschabout 13 years ago
I cannot believe my repositories have no smiles anymore, I don't want to live on this planet anymore.
finalwordabout 13 years ago
hello, octicons.