Codex/Design/Icons

The Codex icon library has come together over time, through custom creations and alterations to icons sourced from other libraries. There are nearly 300 icons in the library. All of theses icons coming together in these different ways has resulted in a collection of icons that feel visually imbalanced and not cohesive, with styles varying in width, roundness, and shape. We have set out to refine this library of icons, to help them feel like they all belong to the same family, with more intention baked into their style and applications.

This page will document design goals, learnings, and thought processes during the journey of refining the Codex icon library. The primary Phabricator task with before and after examples can be found at phab:T399175.

Refinements

Icons are one of the most visibly graphic elements in the wiki interfaces. Knowing this, we understand that there will be a visible change, and so we want to stay as true to the current look and feel of the icons, so to not disrupt any experiences, while improving the consistency, cohesion, and balance of icons as a whole. While various updates have been made to the general style of icons, we also considered how to refine the style of these icons to feel as "Wikipedia" as possible. To us, this means not overcomplicating their style, and making it relatively simple to add new ones.

Style

Width and weight

The icons use a 2px stroke width. This is the width of the majority of current icons, and lends itself to feeling the both grounded in the interface due to its slightly heavier weight. We also tried 1px and 1.5px weights, but felt these were too light across all devices. While inevitable for nearly all icons, these lighter weights also meant more of the icon shapes falling on sub-pixels, causing more potential blurred pixels on screens with lower resolution, specifically 1.5px but also 1px with trying to create consistent sizing and spacing. Commonly, half and odd numbers contribute to these types of problems.

Outline vs Fill

The icons rely primarily on an outlined style. This is not only most common across other products, building familiarity, but it also helps with visual balance. Not all icons can be filled (e.g. arrows, add, etc.) but they can for the most part be outlined. This also lends itself to the idea that we can use certain icons with outlined and filled versions to convey different meaning. For example, an outlined star means you can watch this article, while a filled-in star means you are watching this article. Additionally, we can use a filled-only style on icons that we want to draw more attention to, such as edit, robot (to emphasize machine-assisted experiences), and status-conveying icons.

Roundness

The icons are, for the most part, squared in shape. This helps to simplify the overall shapes and aid in future contributions (since roundness has to be fine tuned depending on each angle. In some instances, specifically for acute angles, a miter/bevel/chamfer join is used, helping to soften, or almost round, certain otherwise sharp corners, throwing off the gestalt of the rather brutalist and squared aesthetic. Round elements do exist in some icon designs, where the roundness helps more than squareness to convey the meaning of the symbol, such as in eyes or the puzzle piece, among many others.

Exceptions

As with all systems, there are instances where intentional and necessary deviations from the defined styles occur. This in order to maintain the integrity of the symbol or letterform, such as the various versions of the bold icon.

Representation

Most icons are just new renditions of the same representation. Some take a slightly, hopefully more clear and consistent direction.

Bidirectionality

Most icons can be represented by the same, primary icon design in both left-to-right (LTR) and right-to-left (RTL) reading languages. The icons which currently have LTR and RTL versions will remain as such. There are new icons added to the library which might also have both versions.

Frequently Asked Questions

Will the icons be available for public use?

Yes, the icons are available for use on Commons (update coming soon).