Abstracted icons refrain from being too literal and hint indirectly instead. For instance, this “Price Builder” icon uses a wrench to imply building something.
You can also depict the concept directly as it appears in reality. In this example, a recognizable ticket is used as an icon to represent "Events."
Nesting adds another graphic element to the design, like adding an action to an object. It gives opportunities to create a narrative or add more meaning.
Nod to the foundational structure of Toyota’s vehicles by using angular forms where applicable.
Hint at the Toyota legacy logo by using the oval silhouette from the logo mark (apply sparingly).
Connect to our Toyota staging logo by using the square (apply sparingly).
Fill in an enclosed shape if the negative space is smaller than 1px for 16px icons, 2px for 32px icons, or 3px for 64px icons.
When using the legacy or staging logo shapes within the icon, fill in the corresponding oval or square so it stands out from the rest of the icon.
Filled Style for 16px
Where applicable, an alternate version of a small 16px icon may be created with a simple, filled shape.
To reflect Toyota’s angular styling, apply repeating angles where possible, especially on vehicles.
For more subtle angle use, consider creating diagonal grid lines. This ensures shapes are visually aligned on a consistent angle.
15° Increment Angles
Consistent Negative Space
Use a 1px corner radius for 16px icons, a 2px radius for 32px icons, and a 3px radius for 64px icons.
To use a round join, round the exterior corners but keep the interior corners sharp.
To avoid overly sharp corners, only use a miter join for angles more than 90°.
Black or white is preferred for all single-color iconography. Small 16px icons are always one-color, never two-color.
For 32px and 64px icons, a red square or oval may be added to a black or white icon if referencing the legacy or staging logo shapes. The red square should be between 1/3 to 1/6 of the icon’s width.
In this example, the keylines would hinder proper proportions for depicting the object accurately. The top of the wrench would appear too small if adhering to the vertical rectangle.
In this case, the keylines would make the objects look too small if they were strictly confined to the grid. So to give the objects enough room to “breathe,” we can break past the guides while still using them for structure.
Here, keylines would make the top and bottom elements feel unbalanced if they were strictly contained. To get a similar visual weight, we can break past the lines while using a diagonal grid to maintain consistency.