Toyota's Iconography System complements our brand personality with a style that's simple, modern and relatable. Learn how to use, create and design unmistakable icons. These guidelines cover all the steps, from concepting to fine details.
An icon is a simple visual story that portrays an idea, object, action or all three. These are our preferred methods to visually convey a concept.
Abstracted
Abstracted icons refrain from being too literal and hint indirectly instead. For instance, this “Price Builder” icon uses a wrench to imply building something.
Literal
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."
Nested
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.
Our style transforms these concepts into modern, relatable and simple designs. Approachable without being overly playful, our design elements are engineered to match our brand personality.
Angles
Nod to the foundational structure of Toyota’s vehicles by using angular forms where applicable.
Ellipse
Hint at the Toyota legacy logo by using the oval silhouette from the logo mark (apply sparingly).
Square
Connect to our Toyota staging logo by using the square (apply sparingly).
Enclosed Shapes
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.
Logo Reference
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.
Square Terminals
Perfect Squares
Perfect Circles
Angles
15° Increment Angles
Consistent Negative Space
Corner Radius
Use a 1px corner radius for 16px icons, a 2px radius for 32px icons, and a 3px radius for 64px icons.
Round Join
To use a round join, round the exterior corners but keep the interior corners sharp.
Miter Join
To avoid overly sharp corners, only use a miter join for angles more than 90°.
One-Color
Black or white is preferred for all single-color iconography. Small 16px icons are always one-color, never two-color.
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.
We have three preferred icon sizes. For every increase in size, 1px is added to all graphic specs (stroke weight, padding, negative space, etc).
-
Small 16px
Due to minimal detail and limited size, the 16px icons should always be used as a UI navigational element, with accompanying copy to help provide context.
-
Medium 32px
With the increased detail available at the 32px size, these icons can serve as informational embellishments or as a preface to the respective body copy.
-
Large 64px
The large-size icons almost belong in the realm of illustration. These can be used to help UI elements feel more interactive by serving as pictograms.
-
Small 16px
-
Medium 32px
-
Large 64px
Proportions
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.
Visual Weight
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.
Balance
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.
We have a select group of illustrative graphics available for internal and limited use only. They should not replace the icon styles above and are intended for large-scale applications. Download here.
