Design/Archive/Wikimedia Foundation Design/Agora icon set

This page described the Wikimedia Foundation icon philosophy, licensing statement, and design guide. Included here are an archive of existing icons, a list of needed icons, and their associated design discussions.

Philosophy

This project is related to the themes and intentions of the Wikimedia Foundation Agora design guide project, the MediaWiki Style Guide, and the development of Athena.

All icons will be styled in some family with the Wikipedia mark.

Licensing

The icon set will be released under the Creative Commons Zero license. We are a free culture shop.

Rationale

The primary goal of building this icon set is to help solidify the visual identity of the various projects of the Wikimedia Foundation. Rather than using another freely available icon set, the WMF design team is building its own icon package because:

Existing free icon sets are insufficient:
- They often contain icons that are crudely or inconsistently designed;
- They often contain a mix of styles, having been accreted over time
- They often contain archaic symbology (e.g., a floppy disk for "save")
- They are often incomplete for our purposes;
- They are often designed for operating systems rather than singular applications;
- They are often designed to mimic other icon sets;
- Individual icons have often been repurposed ad infinitum, thus diluting the symbolic meaning of any individual icon;
We are a top-five property, and should have our own visual identity;
We have multiple teams working on multiple projects. A shared icon set will help us avoid "style drift".

Design guide

The following considerations should be kept in mind when designing an icon for the set:

Icons within the set should look to Wikipedia's "W" glyph for style inspiration regarding lines and overall weight.
Icons must be monochromatic. While styles (such as gradients, or three-dimensional effects) can be applied to them, they cannot contain multiple colors. This allows for:
- Maximum flexibility within color schemes;
- Application of individual colors, shades, and styles to the icons to attract (or demote) attention;
- Better recognition at lower resolutions
As much as possible, icons should be recognizable at a 16x16 pixel size.
- Optimal size should be 32x32. Note that on retina screens, 16x16 is actually 32x32.
- Icons should work well at 40x40 (which is the recommended size for touch interfaces)
As much as possible, icons should survive the "blur" test: if you allow your eyes to blur, can you distinguish two icons from each other? (Easy to test if you wear glasses, or just take out your contacts).
Icon source files must be vector images and exported to SVG files (which can then be exported to PNG for bitmap versions).

Layout Guidelines

Icons, when shown with labels, should not be sized radically different than the text size. Icons should never be placed to the right of a label.

When placed to the left of a label, the font size/height should not be any smaller than 80% of the height of the icon when centered horizontally, and no smaller than 90% when placed on the same line.

Icon templates

Files should be named according to the following convention: WMF-Agora-Name_of_Icon-COLORHEX, where COLORHEX is the hexidecimal value of the primary color of the icon ("Name_of_Icon" obviously should describe what the icon does or its function).

If an icon has additional styles (such as shading, or is enclosed in a circle, or some other decoration), this should be inserted as a type before the COLORHEX (e.g., WMF-Agora-Checkmark-gradient-#CC0000).

WMF-Iconsetname-Name_of_Icon-COLORHEX.png
WMF-Iconsetname-Name_of_Icon-COLORHEX.svg

Icon list

This is a list of the icons of the Foundation as they are developed. This should include the most current image of an icon and discussion regarding each.

Current implementation of main menu.

General

Dismiss - an 'X' in a circle
Note this doesn't match the Vector theme for jquery.ui's close 'X' used in Visual Editor and elsewhere, nor the simple × glyph used in post-edit feedback (bug 48067). It is the close button used by Extension:CentralNotice.
Search - Magnifying glass(?)
Settings/Preferences - Gear
Info - Information
Save
Edit
Pencil in Flow
View History
Item has been changed
mini-pencil icon in Flow
Talk/Discussion
Contributions
Forbidden/ Not Allowed
Email User
Leave a Message
Feed/ Flow
Notifications
Wiki Love Symbol
User Talk
Move Page
Block User
Moderation actions
- Hide content
- Delete content
- Suppress content ("oversight")
- Flow used to use a Flag icon for the set, now just an action menu
Talk/Discussion - Speech Bubbles
- Flow uses a squared-off bubble for topic post count
Single Message - Single speech bubble
History - Clock
Delete - Trashcan
Move
Watch/Unwatch
Note inconsistent between desktop & mobile, bug 54307
Email User
View Contributions
Feedback
Thank
Collapse/Expand
Note: Vector left-hand navigation, category expansion, and LiquidThreads all use different v/> icons; Flow topic history has ^/v icons.
Permalink

Site chrome

Forward - Chevron Right
Backward - Chevron Left
Article Actions Menu Activator - Currently, Page with Three dots
- Chevrons alone will not work
- Appears that it simply needs to look like an affordance
- Three dots alone is good for Android users, but for iPhone users maybe not so much

Page related

Select Page Language - Pau's awesome Icon
- Not monochromatic, likely.

Font Settings - Two characters of different sizes (F?)
- Problem with non-Latin scripts?

Save Page Edits
- Nearly always will be a button
- Tickmark next to Button Text

Mobile specialized

Save Page for Offline Reading - Pin icon
Share Page
Table of Contents
Page Turn
This icon is described at Mobile_design/Contributors

Commons

Upload File/ Select a Media file to Donate
Rotate Left
Rotate Right

Wikipedia specific

Featured Article - Star
Random Article - Dice
What's Nearby - Map pin icon
Contact Us - Paper Airplane
Protected - Padlock
Semi-Protected
Featured Article Quality

Feature/Extension specific

AFTv5

Feature this Post
Hide this Post
Request Oversight/Oversight
Decline Oversight
View Activity
Mark as Resolved
Yes - thumbs up
No - thumbs down
Flag this Post
Happy
Sad
Neutral
Reply

Wikidata

Link
Unlink
Edit
Remove

Moodbar/Feedback dashboard

Happy
Sad
Confused

WikiLove

Wikilove Symbol Heart

New Pages Feed

Reviewed (Green Checkmark)
Nominated for Deletion (Currently black on the list view, black trash icon)
Unreviewed (Red Exclamation Mark)

Curation Toolbar

Close
Learn More Chevron

Echo

Welcome Message
Edit Reverted
Page Nominated for Deletion
User sent you a Message
Response to your feedback
Teahouse Talkback

Flow

Flow-specific items include

topic counts icon/indicator
view controls (full view / collapsed view / small view )

Language-related extensions

Language selection
Display settings
Input settings

Existing icons

This is a list of existing icons and where they are utilized and found in commons. Note that some or many will be replaced by the icons in the Icon list above.