Icons communicate meaning visually; they can convey the usage or purpose of elements through images, condensing complex words into symbols called “Glyphs”. Glyphs are simple visual metaphors which help to conserve real estate in the interface, providing direct context on actions or the nature of an element.
A system icon (or UI icon) uses a glyph to symbolize a command, file, device, or directory. System icons are also used to represent common actions like Close, Print, and Save.
The design of a system icon focuses on simplicity, distilling its function into a concise visual symbol. By focusing on a minimal level of visual complexity and using established conventional glyphs this approach ensures readability and clarity even at small sizes.
In the interest of consistency and accessibility we use the icons listed in the Material.io System Icon library.
Note: Material Design icons must still conform to the Unity guidelines below.
Some Material icons must be resized to allow smaller variations, and Unity icons may occasionally use color instead of adhering to an absolute monochromatic scheme, so internal guidelines come first.
In cases where the Material Design icon set does not contain the right icon for the job do not repurpose an established icon for a new use. Instead create a new icon that follows the guidelines below.
Simplicity is king. Convey the concept with as little complexity as possible while retaining the key concept.
Capitalize on conventions. Don’t try to replace an established icon, instead utilize the existing familiarity of users to enhance adoption.
Be consistent. Make sure designs relate visually to existing icons.
Balance the design. Glyphs should provide a central focal point and occupy the body of the icon as evenly as possible.
Design solid. Icons should use bold stroke weights and symmetry when possible.
Exercise a controlled palette. Try to rely on a monochromatic color scheme when possible, using color to highlight actions when necessary.
Use a solid background. Enhance readability by reducing visual noise.
Focus on the Basics. Design icons geometrically and avoid using organic shapes.
Image First. Avoid using text unless absolutely necessary.
When making icons make sure to save them in editable vector files; work should be saved as either Sketch (.sketch) or Illustrator (.ai) files because PNGs and other image types cannot be used or altered later on.
When designing an Icon it’s helpful to think of a metaphor for the action the icon relates to. Try to focus on concrete concepts, like using a hammer for a Build icon. By having a clear correlation between the symbol and the action readability is increased.
For other more abstract features it can be difficult to find real world metaphors to create symbols with. Instead, try to think of an abstract metaphor that illustrates the idea.
Should all else fail use an uncommon shape that is evocative of the action. Again, this is only if a direct or abstract metaphor does not exist for the action the icon relates to.
We utilize the standard Material Design layout and anatomy guidelines.
1) Glyph: a small, flat symbol which visually represents a meaning or function. These symbols appear without shading and are typically monochromatic. Glyphs usually infer depth or three-dimensionality with simple visual tricks.
2) Body: The area at the center of the icon occupied by most of the icon’s weight lies, generally where the glyph is.
3) Content Area: The area including the glyph in which graphics have sufficient room to be displayed and are unlikely to be cut off from view.
4) Padding: Empty space added to prevent the content within the content area from being cut off or blending in with the rest of the interface.
5) Trim: The icon border. The full size of the icon contains both the content area, padding, and trim.
Icon content is contained by the content area and separated from the trim by padding to prevent cutting-off images. In special cases an icon’s content may bleed into the padding, but they should never extend past the trim area.
Keep icons as flat as possible; don’t use shading, gradients or drop-shadows unless absolutely necessary.
Exceptions: It’s sometimes necessary to give elements visual depth to express the necessary concept for a 3D environment. In those situations using shading is allowable.
As a rule avoid badging icons. Badging decreases the available space for glyphs in the icon and creates self-imposed size restriction.
Pixel hinting for icons is required: Icon PNGs should have crisp edges.
Icon Size: The dimension of the entire icon file, what the file registers as its dimensions.
pt: Points, a resolution independent measurement; at 72 DPI 1PT = 1PX, at 144 DPI 1PT = 2PX
We use HDPI (240 dpi) icons as our baseline to ensure readability on a wide range of display types.
Standard system icons are displayed at 24 x 24 pt and created for viewing at 100% scale to ensure pixel-perfect accuracy. Icons are generally designed at 16 x 16 pt to allow easy scalability.
Our Icon ramp follows the standard sizing: 4pt, 16pt, 24pt, 32pt, 64pt, etc.
For dense layouts measurements can be scaled down to 20pt.
Standard Material system icons call for 2pt stroke weight and 2pt corners but when icons get smaller than 20pt these values don’t make sense; strokes get too thick and corners become too large. To adapt such icons we cut those values in half:
Stroke width: 1pt
Typically on web platforms larger icons are used, making it easier to utilize the standard Material icons. If it becomes necessary to deviate from the 24pt standard make sure to use the pixel-hinted version of the required size.
For example, if the icon needs to be 18x18pt make sure the Material icon pixel-hints the icon. If it doesn’t, go into the master files for Material icons and use the SVG / PNG.
For those using Angular just reference “icons”. That said, it is still necessary to make sure the icon referenced is pixel-hinted. Generally, Angular doesn’t have icons available smaller than 18x18pt.
Material states that on desktops dense icons of 20x20pt can be used, however that’s still too large for most cases. If smaller icons are needed try to look for the smallest size SVG, scale down, and pixel-hint the icon, then save the SVG for later use.
Unity uses a variety of Icon types, each suited for a unique purpose.
Icons for tool buttons which indicate the tool function.
Icons that replace the traditional cursor in the interface.
Icons in the viewport tab which indicate the viewport identity.
Icons that represent the component type and function. These are the only icons which can contain color in the editor.
File icons for assets, scalable up to 256 pt.
Profiler icons represent the categories for ongoing processes in the Profiler window.