Design/Archive/Wikimedia Foundation Design/Agora icon set
This page is outdated. This page contains historical design documentation. See Design or the UI-Standardization workboard for resources and up-to-date information. If you have checked or updated this page and found the content to be suitable, please remove this notice. See the talk page for a possible discussion on this.
- 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.
The icon set will be released under the Creative Commons Zero license. We are a free culture shop.
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".
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).
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.
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).
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.
- Dismiss - an 'X' in a circle
- Search - Magnifying glass(?)
- Settings/Preferences - Gear
- Info - Information
- Pencil in Flow
- View History
- Item has been changed
- mini-pencil icon in Flow
- Forbidden/ Not Allowed
- Email User
- Leave a Message
- Feed/ Flow
- 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
- Single Message - Single speech bubble
- History - Clock
- Delete - Trashcan
- Note inconsistent between desktop & mobile, bug 54307
- Email User
- View Contributions
- Note: Vector left-hand navigation, category expansion, and LiquidThreads all use different v/> icons; Flow topic history has ^/v icons.
- 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
- 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
- Save Page for Offline Reading - Pin icon
- Share Page
- Table of Contents
- Page Turn
- This icon is described at Mobile_design/Contributors
- Upload File/ Select a Media file to Donate
- Rotate Left
- Rotate Right
- Featured Article - Star
- Random Article - Dice
- What's Nearby - Map pin icon
- Contact Us - Paper Airplane
- Protected - Padlock
- Featured Article Quality
- 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
- 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)
- Learn More Chevron
- Welcome Message
- Edit Reverted
- Page Nominated for Deletion
- User sent you a Message
- Response to your feedback
- Teahouse Talkback
Flow-specific items include
- topic counts icon/indicator
- view controls (full view / collapsed view / small view )
- Language selection
- Display settings
- Input settings
- 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.
- page actions
- user icon