Iconography Guidelines 💎
Courtesy of @_ayushjangra_
Icons are designed to be simple, modern, friendly, and sometimes quirky.
Each icon is reduced to its minimal form, expressing essential characteristics.
Let’s discuss the icon anatomy, and layout designed and defined by google material design.
Grid and keyline shapes
System icons are displayed as 24 x 24 dp. Create icons for viewing at 100% scale for pixel-perfect accuracy.
Live and Trim Areas
Live area is the region of the layouot that is unlikely to be hidden from view (such as when sidebars appear upon scrolling).
Trim Area is the 2dp of empty space that makes up the padding surrounding the 20dp x 20dp live area.
Specihc keylines are present for certain shapes: circle, square, rectangle, orthogonals, and diagonals. These basic shapes help unify Google system icons and regulate their placement on the icon grid
Keyline Shapes – Square & Circle
Keyline Shapes – Vertical & Horizontal
- Stroke terminal
- Counter area
- Counter stroke
- Bounding area
Corner radiuses are 2dp by default. lnterior corners should be square, not rounded. For shapes 2dp wide or less, stroke corners shouldn’t be rounded.
System icons use a consistent stroke width of 2dp, including curves, angles, and both interior and exterior strokes.
Bonus — 4 tools that may be useful in your designer way:
Crello — the simplest online image editor. A simple but powerful tool to create awesome designs for any social media format — posts, covers, graphics, and posters using the best software on the web. It’s easy! A lot of animated designs.
Webflow — all-in-one web design tool that allows users to design, build, and launch responsive websites visually.
Funnelytics — an incredible tool that helps you build the best marketing funnel mapping.
Flowkit — allows designers to create frighteningly fast user flows within Sketch and Figma.