Icons are crucial elements in UX design, offering intuitive visual cues and saving interface space by condensing complex concepts into simple symbols. They are designed to be clear and straightforward, distilling functions into easily recognizable representations even at small sizes. Icon design, a specialized field in visual design, focuses on creating these symbolic representations for user interfaces, requiring attention to practices that ensure consistency, clarity, and scalability across platforms and screen resolutions. In products like the Unity Editor, well-crafted icons greatly enhance user navigation, simplify interactions, and boost engagement, ultimately reducing the learning curve for new users through familiar and easily understandable visual signposts.
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.
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.
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.
Where to find icons
The Editor icon library is viewable via a Figma Library and as a gallery with additional documentation on Airtable. (Unity internal access only)
Reusing icons depends on their intended meaning and usage context. As a general rule, using icons for their original intended purpose is acceptable. Avoid repurposing icons for different meanings, request consultation and possibly consider creating a new icon, or using an icon modifier.
Consider using an icon modifier if the concept is linked to an established icon but adjusts the meaning for the user, such as adding a settings cog modifier to signify added settings functionality
Reference the icon database in Airtable to search for concepts and find definitions of icons
You may propose an additional definition of an existing icon if there are no conflicts
Do not take an existing icon, rotate it and implement it as a new icon
Repurposing existing icons for incorrect/unapproved functions will result in bugs being filed and will need to be fixed
The Airtable database is a living document that is collaborative in nature, not all documentation have been added yet but is in progress. If you or your team have any information you may notice is missing, please reach out to the Editor UX Consistency team to help us gather all the information we can.
Teams that have design support and who may already be familiar with the icon process can also utilize a more self-service approach to their icon needs. Designing their icons and submitting them for a review can help speed their implementation process. Teams may use the following The review process can be as collaborative as needed and the UX Frameworks icon designer can offer valuable guidance and consultation throughout.
Keep in mind that any icons submitted for review may require further iteration and adjustments
Avoid last-minute icon requests/reviews and to prevent project delays
The following design guidelines can also be found on the Icon Design Playbook page in the Figma Icon Library
Icon testing and implementation
Requesting teams are responsible for testing their icons to ensure they make sense to their users. Icon testing involves evaluating the clarity, comprehensibility, and effectiveness of the icons in conveying their intended meaning or functionality. Teams should test with representative users to gather feedback and iterate on icon designs as necessary.
Requesting teams are also responsible for the implementation of their iconography. They can find relevant information and guidelines on icon implementation on Confluence. If teams encounter difficulties during implementation, they can reach out to developers in the #devs-ux Slack channel for assistance and guidance.
An example of approved and finalized icon deliverables, designed for light and dark theme.
Do not implement icons into the Editor without a review by UX Consistency
Icons that have not gone through a review, that break the guidelines, or that have been repurposed for incorrect/unapproved functions will result in bugs being filed and will need to be fixed. See Jira ticket section for more information on requesting design support and reviews.
Principles of Icon Design
Use Icons as a Strategy, Not a Primary Solution
Icons play a vital role in creating an effective and delightful user experience. However, they should not be the sole solution and must be integrated into a broader UX strategy.
Avoid relying solely on iconography for user navigation; consider other UI elements as well
Avoid overcrowding UX solutions with excessive icons; a better user experience is not guaranteed by using more icons
Fit within Unity’s Established Icon Style
Reference the current icon library in Figma to ensure new designs fit seamlessly within the existing style.
Use established visual metaphors, such as arrows or shapes, to maintain consistency and improve user recognition
Do not incorporate artistic flourishes that don’t belong, such as placing artwork within a circle or using stylistic notches
Simplicity and Clarity
Icons should be simple, clear, and easily comprehensible at a glance.
Avoid excessive visual complexity or unnecessary details that may hinder recognition or cause visual clutter
Maintain simplicity and clarity by limiting the number of visual elements in a single icon to 2 or 3 at most
Minimal Text Usage
Relying on visual metaphors and symbols instead of text ensures better scalability and cross-cultural understanding.
Icons should generally avoid using text unless absolutely necessary
If text is required, limit it to no more than 2 letters or numbers
Consider Monitor Resolutions
Icons need to consider different monitor resolutions for clarity and legibility.
Continually verify that icons are readable at 100% size
Designers should check icon clarity using the "Pixel Preview" command (Opt+Cmd+Y), ensuring icons remain clear across various screen densities
Exceptions vs Inconsistencies
There are some inconsistencies to be found throughout the icon library. These are primarily unintentional, stemming from designs implemented years ago before a more centralized approach to iconography was in place and are addressed as areas are updated and improved over time.
There are also some intentional exceptions - these are rare approved only with justification and consideration of the tool. A prime example of an exception would be Node icons for Graph Tooling. Node icons appear on a blackboard which is often viewed highly zoomed out and are designed specifically to be able to be more easily seen at less than 100% size. These icons still follow the icon guidelines with the exception of using a heavier stroke weight when needed.
Inconsistencies happen when design style and existing icons are not thoroughly reviewed and incorporated into the design process
Exceptions are made on a case by case basis
Exceptions will not be approved without product-based justification and will result in bugs being filed
Personal preference is not a justification for an exception
Even icons with minor exceptions still follow the overall Editor icon design style
Design Exploration & Iterations
Icon design means designing tiny and sometimes exploring tiny differences. These minute adjustments can make a big impact when seeing an icon at 100% size. Sometimes iterations of a concept may mean adjusting the placement or size of an element by a single pixel here and there.
Designers are encouraged to explore subtle design adjustments
Keep all explorations of icons. After a version 1 review, copy and paste your artboard of explorations to work on V2
Utilize a “scratch sheet” artboard to place explorations you don’t want to iterate on or include in your reviews. Even the designs that don’t work at all have some value as designers will be able to clearly point back to explorations that didn’t work during reviews
Always include both light and dark themes in design explorations. A design that looks great in one theme may not be as clear in the other.
Icon iterations with a range of subtle variations, this is common in icon design throughout versions until finalization
Accessibility
It is important to prioritize accessibility in design. Relying only on color changes for indicating interaction may exclude users who have difficulty perceiving or distinguishing colors.
Icons that change upon a user interaction, such as a toggle, should not solely rely on color as the differentiator
To ensure inclusive design, provide a tangible visual indicator by incorporating other visual cues, such as shape or pattern variations (using color changes when necessary) to signify that a change has occurred in the icon. This is so that all users, regardless of color perception, can understand the icon's status or state
Do
Use a graphic adjustment to differentiate between icons or states
Don't
Rely on color alone to differentiate between icons or states
Sizing and Padding
1. All icons are contained within a 16x16 pixel artboard 2. Most icons have 1pixel of padding all around 3. Tab and Window icons have 2 pixels of padding all around
All icons: are designed and exported with a 16x16 pixel frame
Standard Asset and Component icons: 1 pixel of padding around the inside of the icon area. Effectively giving 14x14 pixels of design area within a 16x16 pixel frame
Tab and Window icons: 2 pixels of padding effectively giving 12x12 pixels of design area within a 16x16 pixel frame. Sometimes 2 pixels of padding is not possible, but designers should aim for that as best practice, for instance if the icon’s artwork needs to be 12x13 pixels to work that is acceptable.
Start small and scale up
Design icons at the smallest size (16x16 pixels) and scale them up in increments of 16 for larger sizes
Do not design icons at arbitrary or large sizes and then scale them down
Always verify that icons are readable at 100% size
Pixel Perfect Design
Ensure strokes and fills align precisely to pixel lines, especially on straight horizontal or vertical positions to reduce blurriness and maintain visual clarity
Turn Grid View on when designing icons (Command + ” )
Do
Use the pixel grid to place shapes and strokes properly within pixels
Don't
Allow shapes and strokes to land between pixels on the pixel grid
Optical Balance
Icons should be optically balanced within the icon area, optical balance differs from absolute centering.
Prioritize clarity over perfect centering to prevent blurriness
If artwork cannot land perfectly in the center, offset it by a pixel to one side. This may mean adjusting/reducing the size of the artwork to be pixel perfect
Placing artwork with 1 empty pixel on the left and 2 pixels on the right is preferable to centered artwork with blurry strokes
Do
Adjust lines, size and centering of the icon for optical balance and clarity
Don't
Ignore padding requirements or center icons perfectly when it means placing lines between pixels
Fills, Strokes, and Gap Weight
Icons are built using a combination of filled shapes and strokes
Strokes are 1 pixel and use rounded end caps and corners
Sharp corners may be used for clarity when needed
Design elements should be separated by at least 1 pixel of space, overlapping elements should have a 1 pixel cutout
Do not use strokes under 1 pixel in weight to ensure they are legible and visually distinguishable when viewed at 100%
Do not mix stroke weights
Do
Use consistent line weight throughout icons
Don't
Mix line weights or use lines that are less than 1 pixel
Icons are a mix of 1 pixel strokes and filled shapes, separation between elements should be at least 1 pixel
Modifiers and Cutouts
Modifiers are visual indications of adjustments or clarifications to existing icon concepts. For example, Light Settings uses the Light icon with a settings cog modifier. Other common modifiers are Add, Edit, Brush, and Render.
Modifiers are positioned in the bottom right corner with 1 pixel of padding from the edge of the icon area
Modifiers employ a "Cutout" effect with 1 pixel of space surrounding the modifier to ensure clarity and distinction
Modifiers should not take up more than a quarter of the overall icon area, including it's cutout
Cutouts should be used whenever a separation or gap is needed between design elements
Just like stokes, do not use gaps under 1 pixel in weight to ensure they are legible and visually distinguishable when viewed at 100%
Sharply angled cutouts should have rounded corners
Do
Set the outer stroke to rounded corners before creating the cutout
Don't
Leaving pointed edges on steep angles will lead to the cutouts removing too much from the bottom element
How to create cutouts
1. Modifiers and overlapping elements need a cutout around them for good visibility.
2. Add a 1 pixel outside stroke with rounded corners around the modifier or top element.
3. Right click the shape and select "Outline Stroke".
4. Delete the inside of the outlined stroke.
5. Select both the expanded shape and the element you’re cutting from and use “Subtract selection”
6. You've now created a cut out. Use these any time there needs to be separation between elements.
7. Clean up any unnecessary outlying pieces by adding a shape to cover it up in the "Subtract" grouped layer.
Color
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.
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
#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
#4B88AC
Resources
Kits, tools, libraries, and documentation to guide users through creating for the Editor.
