Anton Zykin, a professional icon designer from softfacade icons has agreed to design a suite of icons for d7 and release them under the GPL license agreement - for free. When Anton and I first talked, I believe I framed the discussion as 20 icons. That said, recognizing that we can easily go over 20, we need to keep the initiative to a core set.
I've scoured the issues and arrived at the list of icons. I've used a scale of 1-5000 to help us identify a priority and sort:
https://spreadsheets.google.com/a/acquia.com/ccc?key=tRUoIGFPXxW4I3-fI49...
Related issues:
#13911: Drupal GPL icons
http://groups.drupal.org/node/20380
http://groups.drupal.org/icons-drupal
Comment | File | Size | Author |
---|---|---|---|
#91 | sample.png | 32.35 KB | dcrocks |
#68 | Drupal_PNG.zip | 164.12 KB | Noyz |
#46 | 1.png | 109.97 KB | softfacade |
#35 | drupal.icons_.01.png | 90.2 KB | softfacade |
#17 | contour-drupal.png | 5.5 KB | softfacade |
Comments
Comment #1
Noyz CreditAttribution: Noyz commentedAdding appropriate tags
Comment #2
mcrittenden CreditAttribution: mcrittenden commentedSub. Exciting times!
Comment #3
sunSome obvious and real show-blockers are missing:
- Configure
- List
- Edit menu
- List links
- Revisions
- Visibility options
- Access configuration
- Caching
- Reply
- Approve
- Deny
- Load
- Render
Possibly more.
Comment #4
webchickEagerly subscribing! :D Nice to meet you, Anton! Thanks for spear-heading this, Jeff!
Comment #5
sunTagging for Contextual links.
Comment #6
yoroy CreditAttribution: yoroy commentedSo, let's set a clear direction for this effort and decide on which approach this should focus on:
- design high-polished icons for the shortcuts toolbar (in the red boxes)
or,
- (re)design the little glyphs and simpler icons for say, contextual links, add to shortcuts, grippy.png, draggable.png etc. (like the ones in the blue boxes)
I see more value in have a consistent set and guidelines for the latter, since those would give contrib much more valuable and reusable stuff to work with.
Anton, great you are taking this on. Keep in mind that we'll probably never stop reviewing and adding suggestions, so be clear about what you want to do and stick to it! :-) The distinction made above may be of help with that.
Comment #7
softfacade CreditAttribution: softfacade commentedHi Guys,
Nice to meet you all. We are reviewing the list of the icons and will start working on the style then.
Comment #8
softfacade CreditAttribution: softfacade commentedThanks for this. I hope we will create great icons without many reviews.
Comment #9
eigentor CreditAttribution: eigentor commentedWow, I like this so much I gotta insert a badly disguised subsribe comment woohoo we are getting icons.
Comment #10
pbz1912 CreditAttribution: pbz1912 commentedsubscribe
Comment #11
softfacade CreditAttribution: softfacade commentedHere are the first icons, just to try feeling the style. Icons are in two sizes 16x16 and 24x24. Please post your comments here!
We prefer 24x24 size.
Comment #12
eigentor CreditAttribution: eigentor commentedGreat start. The lock is my favourite.
Do you also plan on making grayscale and b/w (positive/negative without shades) versions?
For in many places these will be too glossy, compare this use case: http://drupal.org/node/598758#comment-2240568
Comment #13
Damien Tournoud CreditAttribution: Damien Tournoud commentedThis is Drupal 8 material now.
Comment #14
eigentor CreditAttribution: eigentor commented@Damien - have I missed something? One could discuss some use of Icons, but at least for the Toolbar, they are an integral Part of the concept.
Comment #15
Damien Tournoud CreditAttribution: Damien Tournoud commented@eigentor: Drupal 7 is now feature frozen. The current implementation of the toolbar already have no icon placeholders anymore. This kind of feature request is now Drupal 8 material.
Comment #16
softfacade CreditAttribution: softfacade commentedThanks for the comments. The direction is to have glossy versions and b/w versions for each icon. We will post black and white versions tomorrow.
Comment #17
softfacade CreditAttribution: softfacade commentedHi All! We also created simple contour icons. Icon pack will come with colored icons and contour icons in two sizes 16x16 and 24x24. Waiting for feedback!
Comment #18
eigentor CreditAttribution: eigentor commentedwonderful! very crisp. What I'd really like to know is what this Drupal 8 thing is about.
Here are the starting icons,
Glossy
Contour
Comment #19
Noyz CreditAttribution: Noyz commentedI talked to Anton on the side. Ignore the d8 comment. All of his icons are for D7 and he's fully aware of that. Acording to Anton:
Personally very excited by this!!
Comment #20
pbz1912 CreditAttribution: pbz1912 commentedI like the contour icons, but how would they look on white/lighter background?
Comment #21
softfacade CreditAttribution: softfacade commentedWe will have dark versions for contour icons as well. So this is not a problem
Comment #22
eigentor CreditAttribution: eigentor commentedI'd like to get a timeframe from Webchick or Dries for this. There is a lot of Text links (hopefully) to get enhanced or completely replaced with these icons.
So do they have to be in before string freeze, or not?
If so, we should think of simple replacement icons (compare http://drupal.org/node/598758#comment-2240568) for the places these are meant to go so we could keep string freeze and replace the placeholder icons by the better ones later.
Where else apart from the obvious place Toolbar do we intend to use icons (that did not have them up till now)?
Comment #23
hass CreditAttribution: hass commentedSubscribe, will we also get the Photoshop, Gimp or whatever source files that everyone is able to extend/alter the images later, too?
Comment #24
yoroy CreditAttribution: yoroy commentedIt would be nice to see the list of icons you intend to create. Will there be status ones for example (warning, error, help, info)?
Comment #25
joshmillerFrom a pure designer's standpoint, the contour version is FAR superior to the "glossy" version.
Other bits of commentary:
Below is the list of proposed icons from my brief browsing the issue. I've added descriptors to all of them to help the designers find a visual that hopefully matches up. Can anyone provide a link or screenshots of areas in core that need icons? This would include the dashboard, toolbar, edit-everywhere, module admin page, permissions list, update status, message text, and action links (like, add a block).
Comment #26
Noyz CreditAttribution: Noyz commentedThe master set is here (also at the top of this post):
https://spreadsheets.google.com/a/acquia.com/ccc?key=tRUoIGFPXxW4I3-fI49...
Comment #27
Noyz CreditAttribution: Noyz commentedAccording to Anton he's delivering the source files.
Comment #28
mcrittenden CreditAttribution: mcrittenden commented@Noyz, I get asked to log in if I try the google docs link.
Comment #29
eigentor CreditAttribution: eigentor commented@Noyz right, no login, no list.
Comment #30
yoroy CreditAttribution: yoroy commentedJust so you know, we're looking to implement something like this (click for context):
Comment #31
pembertona CreditAttribution: pembertona commentedsubscribe
Comment #32
Noyz CreditAttribution: Noyz commentedBummer. Try this (which seems to work for yoroy): http://spreadsheets.google.com/pub?key=tRUoIGFPXxW4I3-fI49hGzw&output=html
Comment #33
sun"info" is missing in the list of "Alerts"
Comment #34
eigentor CreditAttribution: eigentor commented@softfacade: what's the status here?
We would love to see some more stuff if you have finished some icons.
We are all so iterative. No reason to try to push it out all in one giant leap of genius.
http://webchick.net/embrace-the-chaos
Comment #35
softfacade CreditAttribution: softfacade commentedPlease review all basic color icons. We are preparing contour icons now.
Comment #36
eigentor CreditAttribution: eigentor commentedSo for everyone:
Comment #37
ugerhard CreditAttribution: ugerhard commentedAll the "x delete" icons feature a red x, but the generic delete is a trash bin. Wouldn't it be better for consistency to make the generic delete a big red x?
Comment #38
eigentor CreditAttribution: eigentor commentedGreat so far, lots of good stuff...
We should review our wanted list based on this, if we got all the main stuff we need here.
What struck me instantly and probably is not too hard to do:
We also need add / edit / delete as solo icons for general purposes (so just
the plus sign, cross, pencil)
Mabe the "edit" pencil could use a bit more contrast or clearness in its shape (especially when small and combined with other signs), I thought first it only was a dash sign and did not recognize it
Though I like the newspater idea for Publish, I find the newspaper a bit hard to recognize. Will sure be different in contour, but also the color icon could be clearer.
The "help" lifebelt may be controversial. The lifebelt definitely the second most used sign for help after the question mark, while the question mark has become kind of a standard that everyone understands intuitively. So we have to decide between being more individual (personally I love the life belt) and being more standard and generic.
In the smaller size (which probably will be used more often) some icons lose sharpness and contrast (maybe you just scaled them for now and will do some retouching later). Namely the node-add, and node-delete, upload and download. I know what drag it is to retouch them for every size :P
Comment #39
eigentor CreditAttribution: eigentor commentedChange status to needs review so everyone has a look.
Comment #40
eigentor CreditAttribution: eigentor commentedand adding some more tags...
Comment #41
te-brian CreditAttribution: te-brian commentedI like the direction the set is going in. I am personally more likely to use a contour or greyscale version of the icons than the really colorful ones.
My favorites are:
- The whole right column. Nice and simple, yet with some depth.
- The node and group icons, although I agree that the plus sign, pencil, and x could use some separation or contrast from the icon they are on top of.
Least favorite:
- Gossy Lock, Unlock, Find, Save: For some reason they just come off a little antiquated for me. The contour versions are nice though.
Comment #42
te-brian CreditAttribution: te-brian commentedI just had a weird realization. Everyone still uses the floppy disk for "Save", but it does not really apply in modern computing. Us oldies (anyone over 16 or so) can relate, but as the younger generation grows up will they even understand all these strange icons they see. Just a funny aside.
Comment #43
Bojhan CreditAttribution: Bojhan commentedSo instead of commenting on each individual icon, I would like to put some thoughts into the overall style. Drupal in its style, has always been somewhat basic - these icons do not neccairly reflect that basic style. Where as Seven for example does.
With that in mind, I think these icon could lose some of the glossy effect - making it more basic (using more black/white contrasts) http://drupal.org/files/issues/Modulepage-settings-6.png - for example. The contour post of eigentor in #18, is basicly the style I am looking for - but somewhat more refined. I know it takes away some of the design touches, one would normally do - but its really part of Drupals identity, which also makes it look more mature to its competitors such as Joomla/Wordpress/Plone.
Eitherway, great work already - looking forward to new revisions!
Comment #44
psicomante CreditAttribution: psicomante commented+1 for icons in Drupal 7; whatever would be, these icons are great.
Comment #45
eigentor CreditAttribution: eigentor commented@bojhan: the contour and b/w styles are also done. The ones of #18 were also Antons work.
He is doing a complete set for us :)
For a more realistic impressions: softfacade, would you mind getting some drupal 7 backend screenshots
(http://www.flickr.com/photos/mverbaar/4108619091/sizes/o/in/pool-903403@N22/ you could cut out the yellow,
http://www.flickr.com/photos/69716653@N00/3660127442/sizes/l/in/pool-903403@N22/
http://www.flickr.com/photos/roprice/3571117052/sizes/o/in/pool-903403@N22/
http://drupal.org/files/issues/Overlay.jpg)
dropping in some of the "glossy" icons to see how they match the style?
Comment #46
softfacade CreditAttribution: softfacade commentedPlease review the revisons and also b/w versions.
Comment #47
mcrittenden CreditAttribution: mcrittenden commentedLoving the black and white ones. The only one of that set that immediately pops out as problematic is the publish one (can't really tell it's a newspaper).
Comment #48
eigentor CreditAttribution: eigentor commentedAah, I like the contour ones very much, too.
The little glossy ones have much more clarity now as well.
Yes, the publish one is difficult. Maybe there can be another allegory to use for that than a newspaper. Especially the contour one reminds me of a metal grid somehow.
What is a bit hard to distinguish is add and delete when combined with other shapes. Dunno if sharp edges in the surrounding outline would help, maybe only for the delete one? Or maybe they should differ in size or stroke width.
Else the small question mark looks a little blurred now, it could use a bit of an heavier stroke.
Not sure if the lock hole fits into the small contour one also? If so, would make the shapes more distinguishable, especially the open small lock might be taken for something else.
Comment #49
Noyz CreditAttribution: Noyz commentedI talked to Anton this morning. If this list isn't the final list, he's willing to add to the suite, but is unwilling to dig through the communities threads to find what's remaining. That said, please come together and iron out what's remaining.
Comment #50
Noyz CreditAttribution: Noyz commentedI talked to Anton this morning. If this list isn't the final list, he's willing to add to the suite, but is unwilling to dig through the communities threads to find what's remaining. That said, please come together and iron out what's remaining.
Comment #51
eigentor CreditAttribution: eigentor commentedIt's a question if we want to stick to basic actions as now, or also want to iconize our categories on admin/config like media, internationalization, worfklow, development, appearance as well as Drupal specific terms like blocks, fields, taxonomy, content type ... This list could become very long.
As a reference one can use the admin module of development seed, they got icons for every- and anything.
A Question also is if Anton wants to finish the job now or is willing to come back to it later and add more stuff, (this could be at least a month or two from now) when we have incorporated the ones finished now and get more clear what is lacking.
Comment #52
eigentor CreditAttribution: eigentor commentedOne that is definitely missing is the one for dashboard, as this is one of the high-res-ones that are in the toolbar.
Comment #53
xmacinfoNice initiative and this is the first time I look at this issue.
I'll comment on the #46 icons list.
Looking forward to see icons in Drupal 7. :-)
Comment #54
xmacinfoI forgot, on the contour column in the alert section, these icons should be desaturated, not only in gray. :-)
Comment #55
eigentor CreditAttribution: eigentor commentedHow can we handle the dropshadows for wretched old IE6? Will we do something like PNG8 with alpha channel like here? http://drupal.org/node/377204
Maybe there is already a PNG-Fix in Core and I don't know about it...
Comment #56
q0rban CreditAttribution: q0rban commentedSubscribe.. I really like the clean look of the black and white ones.
Comment #58
q0rban CreditAttribution: q0rban commentedMarked #13911: Drupal GPL icons as a duplicate of this issue.
Comment #59
jensimmons CreditAttribution: jensimmons commentedsubscribe
Comment #60
mrfelton CreditAttribution: mrfelton commentedI think that the greyscale icons would produce a far more professional looking site, whilst the colour icons would probably sit better with bloggers. I prefer the greyscale and if I had a choice I would use them on most sites I develop. Question: Will we get a choice? I mean, will both icon sets be developed and included giving the user the ability to choose?
And some comments on the individual icons:
Shortcut edit (small version): Because the arrow and pencil are pointing in exact opposite directions, the pencil almost looks like an extension of the arrow and the two entities become a little indistinguishable. Could the shortcut arrow point to the top left instead?
Unlock: This icon is too wide in comparison to all the others. Instead of opening and twisting 180 degrees, could the top part of the lock just list up slightly to leave a small gap between it and the lock body?
Shortsut edit / Shortcut add: The arrow has a curved bottom, which is quite nice. However, at the smaller size (especially for the shortcut add icon) the arrow's curved tail ends up looking strange as too much of the curve is hidden by the + symbols. I initially though it was a few rouge pixles and had too look really hard to see what it actually was (part of the curved tail). Infact, the only way that I could tell was by comparing it against the larger versions of the icons where I could more clearly see that it was supposed to have a curved tail.
Publish: I agree with the comments in http://drupal.org/node/606490#comment-2389564 - try a single page with an arrow pointing inwards. Whilst the current icon kind of works for the glossy icons, it doesn't for the greyscale.
Save: (glossy) Purple seems a little too strong.
Lock unlock (glossy): Gold seems a little too strong, almost garish.
Overall, I think they are great and that their inclusion in Drupal will help move Drupal up a level in class.
Comment #61
XanoSubscribing and a few comments:
- Will the icons's source files be published as well? This allows more flexibility for (contrib) developers and themers to create or modify icons.
- Save: the purple icon looks very cool, but considering the history of save icons blue might be more recognisable.
- RSS: does the existing RSS icon fit this style?
- Images: core does a little image handling and contrib does a lot. Icons for this context would probably come in handy.
- Permissions: what about a key chain instead of a single key? With one key you can (un)lock just one thing, while a key chain describes a more extensive set of possibilities. Not sure how easy it will be to create such an icon on this scale though.
- Placement: arrows pointing left and right would be a nice addition.
- Comments: comments are an important part of Drupal and used on a lot of sites. Could you create icons for adding, removing comments etc.?
I'm impressed and I really hope this issue can be fixed in time! Good work!
Comment #62
yhahn CreditAttribution: yhahn commentedVery nice work : )
@noyz & @anton: Do you know what format the icon source graphics will be available in? An open (and standards-based) format like SVG would be preferred for longevity and not vendor-locking the images to a company like Adobe.
Comment #63
mrfelton CreditAttribution: mrfelton commentedAre there any plans to get these included in the Alpha release? Will the icons actually be included in all the core themes, or just as a bundle that is available for contrib to use? Will there be any kind of api to help use them?
Comment #64
xmacinfo[cleaned]
Comment #65
xmacinfoOups! Too many tabs opened!
Comment #66
NaheemSays CreditAttribution: NaheemSays commentedsubscribe
(on the shiny versions, I do think the action icons are too small - the plus, pencil and cross IMO need to be larger to become better noticed. This is not needed for the grey ones as there, the shapes are well defined and easy to notice.)
Comment #67
Noyz CreditAttribution: Noyz commentedreached out to anton earlier today for the source files.
Comment #68
Noyz CreditAttribution: Noyz commentedHere are the source files from Anton.
Comment #69
yhahn CreditAttribution: yhahn commentedRendered PNGs are not source files.
Comment #70
jide CreditAttribution: jide commentedSource files apart, what's the progress on this ? Any chance this gets in 7.x ?
Looks good otherwise.
Comment #71
eigentor CreditAttribution: eigentor commented@noyz: please ask Anton for the SVGs or EPS or whatever vector or photoshop files he bases the icons on. Other we cannot really modify and work on them. This is GPL Land ;)
Comment #72
Noyz CreditAttribution: Noyz commentedI have the .psd version here http://jeffnoyes.com/content/drupal-icons
Comment #73
XanoAdding the icons here so we are not dependent on external hosting.
Comment #74
XanoAdding the icons here so we are not dependent on external hosting.
Comment #75
XanoSomething went very wrong here with uploading the attachment.
Comment #76
XanoI think this went wrong due to the upload site limit, but I never got a validation error... I also have no clue why the tags disappeared, so here they are again.
Comment #77
mcrittenden CreditAttribution: mcrittenden commentedEdit: blah, ignore.
Comment #78
eigentor CreditAttribution: eigentor commentedAh, the photoshop file has got paths in them. Great. I never figured out how to do vector stuff in Photoshop, but this is a good opportunity ;)
Comment #79
sun.core CreditAttribution: sun.core commentedComment #80
yoroy CreditAttribution: yoroy commentedI recently started Protocons icon library to bring my so for quite fragmented icon work together. The Protocons source files are 512*512px SVG files made in Inkscape. If anybody feels like we should integrate some of the concepts here with Protocons, drop by in the issue I opened for this.
Comment #81
ratioswitch CreditAttribution: ratioswitch commentedSubscribing ... I might actually be able to help here.
Comment #82
mgiffordI like the icons in #46.
I do like the idea of having icons done in Inkscape so that we have more control of them.
Comment #83
nickbits CreditAttribution: nickbits commentedWhat is the status of the icons? Are they available to use yet?
Comment #84
Noyz CreditAttribution: Noyz commentedYup. Yours for the taking.
Comment #85
Shadlington CreditAttribution: Shadlington commentedThe linked page in #72 doesn't exist anymore.
Comment #86
KrisBulman CreditAttribution: KrisBulman commentedSo as far as I can see here, we don't have access to the source icons anymore.. is that correct? The link to Jeff Noyes site is no longer up.
Is there another thread or any further plans for a Drupal icon initiative?
Comment #87
mgiffordSeems that the one GDO group is down, but I'm not sure which of Jeff's links we're talking about here. There is still this post http://groups.drupal.org/node/20380
It would be good if we could get this settled for D8!
Comment #88
yoroy CreditAttribution: yoroy commentedThere was an icon group on g.d.o but we folded the few posts in there into http://groups.drupal.org/design-drupal
http://drupal.org/project/protocons welcomes anyone who wants to help extend the set there!
Comment #89
nickbits CreditAttribution: nickbits commentedI assume it was the icons from post #68 that are the correct ones. It would be nice to have this confirmed and perhaps put information and files either in the theming documentation or into D8.
Comment #90
yoroy CreditAttribution: yoroy commented68 indeed contain the softfacade icons. None of them are used in core though, so there's no direct need to document their usage. If that's what you mean?
Comment #91
dcrocks CreditAttribution: dcrocks commentedHas anyone worked on icons for individual modules, ie., icons for blogs, books, forums, search, etc. The icons I've seen so far are for menu items displayed in a form, not for displaying iconified menu's. I'm looking for something like a smart phone display where each "app'(or module as 'app') has an icon and the site menu is displayed as a grid of icons. I admit trouble finding such icons as the world seems to be mostly made up of dvd player icons. I've come up with some but it is hard to build a consistent set.
Comment #92
Noyz CreditAttribution: Noyz commentedNope. What's there is what's there. Im pretty sure it's not even being used.
Comment #93
lpalgarvio CreditAttribution: lpalgarvio commented#606490-46: Drupal GPL icons - a softfacade initiative
#606490-88: Drupal GPL icons - a softfacade initiative
nice and clean work there
Comment #94
RobLoachRelated: #1282410: Icons for Operations
Comment #95
cpliakas CreditAttribution: cpliakas commentedSubscribing.
Comment #96
RobLoachI kind of want to close this issue. We already have jQuery UI Icons in core, and its already well documented, and theme-switchable. We just need to make use of it throughout core. If we keep this issue open, it'll just turn into an never-ending bike shed discussion.
What we need here are actionable items.
Comment #97
mgiffordOk, so I'll close this as it's been inactive for 9 months.
Created this in response to Rob's call for actionable items - #1744278: Make use of jQuery UI Icons in core
Comment #98
klonos...actually, nothing was fixed here. What is proposed in the issue title/summary never happened. So wontfix is the proper status.
Comment #99
KrisBulman CreditAttribution: KrisBulman commentedi suggest vector icons via a custom icon-font set if this is to go forward. With retina screens on the market, Icons need to scale well, and images just aren't cutting it any more.
http://css-tricks.com/examples/IconFont/