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

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Noyz’s picture

Issue tags: +icons, +#d7ux

Adding appropriate tags

mcrittenden’s picture

Sub. Exciting times!

sun’s picture

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

webchick’s picture

Eagerly subscribing! :D Nice to meet you, Anton! Thanks for spear-heading this, Jeff!

sun’s picture

Issue tags: +Contextual links

Tagging for Contextual links.

yoroy’s picture

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

iconstyles

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.

softfacade’s picture

Hi Guys,

Nice to meet you all. We are reviewing the list of the icons and will start working on the style then.

softfacade’s picture

Thanks for this. I hope we will create great icons without many reviews.

eigentor’s picture

Wow, I like this so much I gotta insert a badly disguised subsribe comment woohoo we are getting icons.

pbz1912’s picture

subscribe

softfacade’s picture

FileSize
8.09 KB

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

eigentor’s picture

Great 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

Damien Tournoud’s picture

Version: 7.x-dev » 8.x-dev

This is Drupal 8 material now.

eigentor’s picture

Version: 8.x-dev » 7.x-dev

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

Damien Tournoud’s picture

Version: 7.x-dev » 8.x-dev

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

softfacade’s picture

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

softfacade’s picture

FileSize
5.5 KB

Hi 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!

eigentor’s picture

wonderful! very crisp. What I'd really like to know is what this Drupal 8 thing is about.

Here are the starting icons,

Glossy

Contour

Noyz’s picture

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

"We will have both color and contour b/w icons. In both sizes 16x16 and 24x24."

Personally very excited by this!!

pbz1912’s picture

I like the contour icons, but how would they look on white/lighter background?

softfacade’s picture

We will have dark versions for contour icons as well. So this is not a problem

eigentor’s picture

Status: Active » Needs review

I'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)?

hass’s picture

Subscribe, will we also get the Photoshop, Gimp or whatever source files that everyone is able to extend/alter the images later, too?

yoroy’s picture

It would be nice to see the list of icons you intend to create. Will there be status ones for example (warning, error, help, info)?

joshmiller’s picture

Version: 8.x-dev » 7.x-dev
Status: Needs review » Needs work

From a pure designer's standpoint, the contour version is FAR superior to the "glossy" version.

Other bits of commentary:

  • I recommend that the glossy version keep to a two-tone that works either with the admin theme color scheme (gray and black) or the traditional garland scheme of blue and dark blue.
  • Not to derail the discussion, but doesn't Jquery-UI ship with an awesome set of colorable generic icons? Can we re-use them since jquery ui is in core? Should we at least take a note on how they implemented such a simple set of icons?
  • this is now my most favorite issues, ever
  • The "Lock" for permissions has been cited as confusing, and a "key" has been recommended as a more intuitive replacement

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

Configure
Also known as settings. Used on modules admin page.
Suggested visual: Cog
Search/Filter
I think a complete set of icons would include a search or filter visual that could be used to enhance all of the many filter parts of forms.
Warning
We have lots of places in core where warning icons exist. Update status, messages, etc.
Error
Similar to warning, but more severe
Help
A simple question mark with circle has worked in the past. Found in the module listing page as well as in d7ux mockups top right of the node edit forms ("Help is on")
Info
Most similar to warning/error but is the least severe.
List
Unsure what sun meant by this term? Perhaps to list content?
Edit menu
Probably need a generic "sub icon" for edit, like a small pencil or cog, and a large generic icon for menus
Most likely found in the "edit everything" links.
List links
Sun suggested this, but we need more context on what this means
Revisions
Content can have multiple saved and comparable versions. Good luck on this visual
Visibility options
This is only a configuration option for block content. It should say "this bit of content can show up on these pages."
Or, more simply, perhaps an eye icon like Photoshop uses for layer visibility.
Access configuration
This is the lock icon found in your current iteration. I recommend a key instead of a lock
Caching
Think of the webserver building a page, saving the built page, and displaying the saved version to the user without having to rebuild the page.
More simply: Temp Save
Reply
Required for "edit in place" and could be a simple return arrow design
Approve
As in, approve this comment
Deny
As in, kill this comment
Load
Not sure what sun had in mind, but I'm thinking this should be a simple throbber
Render
Again, not sure what sun had in mind.
Noyz’s picture

The master set is here (also at the top of this post):
https://spreadsheets.google.com/a/acquia.com/ccc?key=tRUoIGFPXxW4I3-fI49...

Noyz’s picture

According to Anton he's delivering the source files.

mcrittenden’s picture

@Noyz, I get asked to log in if I try the google docs link.

eigentor’s picture

@Noyz right, no login, no list.

yoroy’s picture

Just so you know, we're looking to implement something like this (click for context):

pembertona’s picture

subscribe

Noyz’s picture

Bummer. Try this (which seems to work for yoroy): http://spreadsheets.google.com/pub?key=tRUoIGFPXxW4I3-fI49hGzw&output=html

sun’s picture

"info" is missing in the list of "Alerts"

eigentor’s picture

@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

softfacade’s picture

FileSize
90.2 KB

Please review all basic color icons. We are preparing contour icons now.

eigentor’s picture

So for everyone:

ugerhard’s picture

All 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?

eigentor’s picture

Great 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

eigentor’s picture

Status: Needs work » Needs review

Change status to needs review so everyone has a look.

eigentor’s picture

Issue tags: +Usability, +D7UX

and adding some more tags...

te-brian’s picture

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

te-brian’s picture

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

Bojhan’s picture

So 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!

psicomante’s picture

+1 for icons in Drupal 7; whatever would be, these icons are great.

eigentor’s picture

@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?

softfacade’s picture

FileSize
109.97 KB

Please review the revisons and also b/w versions.

mcrittenden’s picture

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

eigentor’s picture

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

Noyz’s picture

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

Noyz’s picture

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

eigentor’s picture

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

eigentor’s picture

One that is definitely missing is the one for dashboard, as this is one of the high-res-ones that are in the toolbar.

xmacinfo’s picture

Nice initiative and this is the first time I look at this issue.

I'll comment on the #46 icons list.

  • In general the left color column is too glossy (as other pointer out here).
  • All the action icons should adopt a two-tone approach, making the +/-/edit symbol saturated and the background behing desaturated (for example the Add user icon should have a light (desaturated) purple color behind the green (saturated) + sign).
  • The +/-/edit symbol actions icons in the contour column should be made in colors, though desaturated (for example the + should be green, but desaturated).
  • In the General concepts area, the Publish icon should use a single page newspaper icon with the addition of an arrow pointing in the middle of the newspaper page.

Looking forward to see icons in Drupal 7. :-)

xmacinfo’s picture

I forgot, on the contour column in the alert section, these icons should be desaturated, not only in gray. :-)

eigentor’s picture

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

q0rban’s picture

Subscribe.. I really like the clean look of the black and white ones.

q0rban’s picture

Marked #13911: Drupal GPL icons as a duplicate of this issue.

jensimmons’s picture

subscribe

mrfelton’s picture

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

Xano’s picture

Subscribing 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!

yhahn’s picture

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

mrfelton’s picture

Are 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?

xmacinfo’s picture

Status: Needs review » Closed (duplicate)

[cleaned]

xmacinfo’s picture

Oups! Too many tabs opened!

NaheemSays’s picture

Status: Closed (duplicate) » Needs review

subscribe

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

Noyz’s picture

reached out to anton earlier today for the source files.

Noyz’s picture

FileSize
164.12 KB

Here are the source files from Anton.

yhahn’s picture

Rendered PNGs are not source files.

jide’s picture

Source files apart, what's the progress on this ? Any chance this gets in 7.x ?
Looks good otherwise.

eigentor’s picture

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

Noyz’s picture

I have the .psd version here http://jeffnoyes.com/content/drupal-icons

Xano’s picture

Issue tags: -Usability, -icons, -D7UX, -#d7ux, -Contextual links

Adding the icons here so we are not dependent on external hosting.

Xano’s picture

Adding the icons here so we are not dependent on external hosting.

Xano’s picture

Something went very wrong here with uploading the attachment.

Xano’s picture

Issue tags: +Usability, +icons, +D7UX, +#d7ux, +Contextual links

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

mcrittenden’s picture

Edit: blah, ignore.

eigentor’s picture

Ah, 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 ;)

sun.core’s picture

Version: 7.x-dev » 8.x-dev
yoroy’s picture

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

ratioswitch’s picture

Subscribing ... I might actually be able to help here.

mgifford’s picture

I like the icons in #46.

I do like the idea of having icons done in Inkscape so that we have more control of them.

nickbits’s picture

What is the status of the icons? Are they available to use yet?

Noyz’s picture

Yup. Yours for the taking.

Shadlington’s picture

The linked page in #72 doesn't exist anymore.

KrisBulman’s picture

So 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?

mgifford’s picture

Seems 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!

yoroy’s picture

Issue tags: -D7UX, -#d7ux, -Contextual links +design

There 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!

nickbits’s picture

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

yoroy’s picture

68 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?

dcrocks’s picture

FileSize
32.35 KB

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

Noyz’s picture

Nope. What's there is what's there. Im pretty sure it's not even being used.

lpalgarvio’s picture

RobLoach’s picture

cpliakas’s picture

Subscribing.

RobLoach’s picture

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

mgifford’s picture

Status: Needs review » Closed (fixed)

Ok, 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

klonos’s picture

Status: Closed (fixed) » Closed (won't fix)

...actually, nothing was fixed here. What is proposed in the issue title/summary never happened. So wontfix is the proper status.

KrisBulman’s picture

i 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/