Iconography

LTS 2022.3

Iconography

Icons are visual representations that symbolize commands, devices, directories, or common actions in the Editor.

Overview

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

1. Single-size icons, 2. Icons with MIP levels, 3. Gizmo icons

Unity Editor icons scale up using these standard sizes (in pixels): 16x16, 32x32, 64x64, 128x128, 256x256

Single-size icons

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.

A single-size icon in non-retina and retina sizes

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

Examples:

Animation.Play.png
Animation.Play@2x.png
d_Animation.Play.png
d_Animation.Play@2x.png
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.

Icons with MIP levels example in five sizes

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.

WhiteBox@16.png
WhiteBox@32.png
WhiteBox@64.png
WhiteBox@128.png
WhiteBox@256.png
WhiteBox@512.png

Examples of file names for dark themes:
Icons for dark themes are indicated by the prefix: d_

d_WhiteBox@16.png
d_WhiteBox@32.png
d_WhiteBox@64.png
d_WhiteBox@128.png
d_WhiteBox@256.png
d_WhiteBox@512.png

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"

Gizmo icons exist in the scene to show users the location of objects that are invisible when deselected.

Icon of a letter I in a blue circle indicating this is a piece of informational content

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.

Icon formatting

Artboard

Icon artboard guides

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.

File format

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.

Color

Unity Editor icons are available in dark and light themes.

Icon of a red triangle to indicate a message of warning.

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.

Primary palette

Common name

Color description

Light theme

Dark theme

Gray

Icons that don’t require to be color coded uses this color.

#555555

#C4C4C4

Secondary palette

Common name

Color description

Light theme

Dark theme

Blue

Primarily for Graphics product area.

#0C6CCB

#80D8FF

Charcoal / White

Primarily for Unity logo symbol.

#f0f0f0

#2F2F2F

Coral

Primarily for Navigation feature area.

#B73C15

#FF6E40

Cyan

Primarily for Animation product area.

#0F7686

#80FFE6

Green 1

Primarily for Physics feature area.

#2E7D32

#B2FF59

Magenta

Primarily for components and assets icons for Network and Constraints feature area.

#CD237F

#E78DDC

Purple

Primarily for 2D product area.

#673AB7

#AF91F4

Yellow

Primarily for Lights feature area.

#C99700

#FFC107

Feedback colors

Common name

Color description

Light theme

Dark theme

50% Gray

It is for when there is no ways to create depth or segment visually an element in an icon. Minimally used.

rgba(85, 85, 85, 0.5)

rgba(196, 196, 196, 0.5)

Cobalt

Primarily for suggesting active states and messages. e.g.) Active, On

#0F49BD

#57AEFF

Gray

Primarily for suggesting neutral state. e.g. standing by

#C4C4C4

#555555

Green 2

Primarily for suggesting positive states and messages. e.g.) Success, Good, Done

#008126

#14D368

Scarlet

Primarily for suggesting error states and messages.

#B10C0C

#FF534A

White

Primarily for icons that need to change color on a selected state.

#F0F0F0

Yellow

Primarily for suggesting warning states and messages.

#C99700

#FFC107

Accent colors

Common name

Color description

Light theme

Dark theme

Antique Red

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.

#B25553

#FD8678

Iris / Purple

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.

#6D66CC

#A1A3FF

Orange

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.

#B76106

#FFBA6B

Sea / Spring Green

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.

#00876A

#69E39F

Steel Blue

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.

#4B88AC