Icons visually convey the usage or purpose of elements through images, condensing complex words into symbols that conserve real estate in the interface. The best icons are simple and clear, distilling function into a concise visual symbol that is understandable even at small sizes.
Icon types and sizes
Most tool/functional icons in the Editor are single size; which means they are not scaled between different sizes. We do however support double-resolution versions made for retina screens.
The sizes of these icons vary depending on their context. These icons usually come in two sizes: The normal size and the retina display size, which is twice as large.
Naming conventions for single-size icons
- All words in an icon name start with a capital letter
- The retina version should have the suffix @2x just before the file extension, while the non-retina version should have no such suffix.
Note: this is different for icons with MIP levels (see section below)
- Icons for dark themes are indicated by the prefix: d_
- Note: Icons without the d_ prefix will be used for both light and dark themes, in case there isn't a d_ version of the icon available.
- Selected state icons are the same in both light and dark themes however, separate files are provided for both as the naming convention still needs to follow current conventions. Selected state icons are indicated with (Space)On at the end of the name
- Animation.Play On.png
- d_Animation.Play On.png
Icons with MIP levels
All icons that are intended to be visible in the Project window (for example Asset icons used in the Project Window) need to have MIP Levels. This means three to four versions of each icon in different sizes are required.
Use five icon sizes to accommodate the retina-supported Editor (in pixels): 16x16, 32x32, 64x64, 128x128, and 256x256.
Naming conventions for icons with MIP levels:
- All words in an icon name start with a capital letter
Examples of file names for different sizes:
Different sizes are indicated by this suffix: @[pixel size]
Note that this is different than for single-size icons. Icons with MIP levels should not use @2x, @4x or similar suffixes.
Examples of file names for dark themes:
Icons for dark themes are indicated by the prefix: d_
Examples of file names for selected state:
Icons for selected state (how the icons should look when the object is selected, so the background is blue) should have an " On" suffix before the "@".
- WhiteBox On@16.png
- WhiteBox On@32.png
- WhiteBox On@64.png
- WhiteBox On@128.png
- WhiteBox On@256.png
- WhiteBox On@512.png
- d_WhiteBox On@16.png
- d_WhiteBox On@32.png
- d_WhiteBox On@64.png
- d_WhiteBox On@128.png
- d_WhiteBox On@256.png
- d_WhiteBox On@512.png
Gizmo icons (SceneView icons)
Gizmo icons are MIP level icons that exist in the scene to show users the location of objects that are invisible when deselected.
The naming convention for gizmo icons is: “[Example] Gizmo_MIP[0-4].png"
Exporting gizmo icons
When exporting or saving a gizmo icon in Photoshop or Illustrator add a black background layer with transparency set to 99% (opacity 1%). This is to avoid Photoshop or Illustrator optimising the alpha which shows up as a white border around the image in the scene view. This only applies to gizmo icons, not MIP level icons in general.
- All icon artboards are 16x16 px with a 1 px margin all around, making icons effectively 14x14 px in size.
- Do not use borders to create negative space.
Icons in the Editor should be in a transparent .png format.
.SVG files are not currently supported.
IMGUI does not support the use of .SVG icons and until transition to the UI Toolkit framework is complete, .PNG icons will continue to be used. Incorporating .SVG icons into the Editor is an ongoing initiative and this document will be updated when .SVG capability is implemented.
Unity Editor icons are available in dark and light themes.
Intended for icons only
The icon color palette below is intended to be used for icon colors only. Do not use it in brand / product design implementations.
For more information about other colors go to Foundations > Color Palette.
Icons that don’t require to be color coded uses this color.
Primarily for Graphics product area.
Primarily for Unity logo symbol.
Primarily for Navigation feature area.
Primarily for Animation product area.
Primarily for Physics feature area.
Primarily for components and assets icons for Network and Constraints feature area.
Primarily for 2D product area.
Primarily for Lights feature area.
It is for when there is no ways to create depth or segment visually an element in an icon. Minimally used.
Primarily for suggesting active states and messages. e.g.) Active, On
Primarily for suggesting neutral state. e.g. standing by
Primarily for suggesting positive states and messages. e.g.) Success, Good, Done
Primarily for suggesting error states and messages.
Primarily for icons that need to change color on a selected state.
Primarily for suggesting warning states and messages.
Accent color used to communicate to remove. It is often used for tool mode icons to help rows of icons distinguishable. It also help with associating icons that have commonality between their tool functionality.
Accent color used to communicate to modify. It is often used for tool mode icons to help rows of icons distinguishable. It also help with associating icons that have commonality between their tool functionality.
Accent color used to communicate to select. It is often used for tool mode icons to help rows of icons distinguishable. It also help with associating icons that have commonality between their tool functionality.
Accent color used to communicate to add. It is often used for tool mode icons to help rows of icons distinguishable. It also help with associating icons that have commonality between their tool functionality.
This accent color is for generic use. It is used when an element is placed on a White (#f0f0f0) color shape. This color may not work directly on Dark Theme backgrounds.
Where to find icons
We are working towards adding Icon libraries on our Figma community profile. Check back soon!