Collecting/revisiting/defining rules for creation of new icons within our icon repository:
So far we have the following rules:
Format
- All icons are vector-based, in SVG format
Design criteria
- Neutral
- Simple
Technical specifications
- Monochromatic (Fill color –if defined– is #000, background color –if defined– is #fff, otherwise transparent)
- Feature rounded corners on single path strokes (to be clarified – where and when needs to be sufficiently guided)
- Filled areas (as opposed to outlines to define shapes; to be clarified – doesn't apply to “Alert”, “Help” or “Info” for example)
- Cross-out lines are from top-left to bottom-right (\). See T133076
License for contributor additions
- Must be free licensed
Open questions:
- Stroke width? Medium-thick strokes, but needs clearer guideline
- Size of canvas? Currently 24px x 24px
- Usage of canvas – full vs padded?
- Are they added after SVG optimization, like with SVGOMG? Or are we (also) adding non-compressed source files into the repository?
Those rules were discussed here and made their way into style guide.
Finalized, agreed on rules:
- Reduce to the essential form.
- Universal rather than culturally-specific.
- Avoid textual content within the icon.
- Abstract forms or concrete objects depending on context.
- Neutral point of view.
Visual principles:
- Monochromatic. Solid color icons.
- Geometric. Comprised of simple and ideally symmetrical geometric shapes. Symmetrical icons tend to be more universally applicable (an open book rather than a closed book with binding on left or right side).
- Front-facing. Icons are flat and front facing, not multi-dimensional.
- 20 x 20 dp default canvas. WikimediaUI icons are put on a 20 x 20 device-independent pixel (dp)[2] canvas per default.
- Rounded corners. Corners are rounded to make shapes more friendly and welcoming. For the default canvas use 2 dp rounded corners. Note that rounded corners are applied only on the exterior of an icon shape, not interior corners.
- Medium thick stroke. Lines and outline should be visible at smaller sizes without effort, for the default icon canvas use a 2 dp thick stroke as standard. Endpoints of lines are square in keeping with simple geometric shapes.
- Diagonal cross-out lines. For icons that appear to be crossed-out, the cross-out line starts from the top-left of the icon and continues at a 45 degree angle to the bottom right (similar to a backslash “\”).
