Icons

A common style unites several icons into a set and makes them recognizable.

Use a flat geometric icon style with straight corners and edges. Flat icons remain legible even in small sizes.

Use flat shapes instead of complex 3D forms:

Incorrect	Correct

Use straight corners and lines instead of curves. It’s recommended to use 45° and 90° angles, or 30° and 60° where possible:

Incorrect	Correct

Icons should be as simple as possible without losing their meaning. Clean and simple icons ensure readability and reduce visual clutter.

Incorrect	Correct
Reduced the icon to its minimal form, without losing its meaning.

Basically, icons fit into a square artboard. Leave a transparent padding around the perimeter. For default 16px icons, the transparent border is 1px, so the icon’s visible part should be inside the 14px x 14px area.

Content should only go beyond the borders if a modifier is added, or if additional visual weight is required.

Sizes for other icon sizes can be found in the table below:

Use basic shapes to build icons, such as squares, circles and rectangles. Using a grid and basic shapes ensures consistent visual proportions and placement.

Square 12px x 12px	Circle 14px
Horizontal rectangle 10px x 14px	Vertical rectangle 14px x 10px

Make sure that icons have the same visual weight. The more filled an icon is, the less space it needs. Following this rule, circles, rhombuses, triangles and other non-square shapes should have larger height and width to be optically balanced with square figures.

Icons with more details should occupy more space.

Icon weight can often take priority over the basic shape sizing. For more examples on visual weight compensation, see Optical Effects in User Interfaces.

Use a 2px stroke as the main drawing line. Consistent line weight makes icons cohesive.

Use consistent stroke width.	A thinner stroke can be used for subtle tweaks to the legibility of an icon and for optical correction.

Align pixels on the X and Y axis and round to the nearest whole pixel, or 0.5px if it’s not possible to align to integer pixels. Aligning icons off the pixel grid will make the icon blurry when it’s rasterized.

note

To check what an icon will look like when rasterized use the View | Canvas | Show Pixels on Zoom option Ctrl+P in Sketch, View | Pixel Preview Alt+Ctrl+Y in Illustrator.

Incorrect	Correct
If an icon is positioned off pixels, it becomes blurry when rasterized.	Position stokes on integer pixels where possible.

Use the 30°, 45° and 60° angles for diagonal lines as they look sharper than diagonals with other angles.

Round shapes, small details and some letters cannot be aligned to the pixel grid. Make sure that the significant pixels have sufficient saturation.

Reduce the number of anchors as they increase the size of the image and takes longer to process it.

Incorrect	Correct
Unneeded anchors are added.	Use the minimum number of anchors.

A modifier is a small shape added over the base icon.

The default modifier position is the bottom right corner. If the base shape is badly recognizable with a modifier in the bottom right corner, or if several modifiers are needed, the modifier can be placed in other corners.

Place the modifier in the left corner if the base shape is badly recognizable with the modifier in the right corner.

Place the modifier in the left corner if there are several modifiers.

A modifier size is from 6px to 9px, depending on the shape's weight. Leave a 1-2px spacing between the modifier and the main shape, to make the modifier clearly visible.

General rules for arrows: arrowhead is a filled triangle with a 90° pointing angle, a 2px body ends in a square stroke. An arrow’s orientation is horizontal, vertical, 45° or round.

Unfilled arrowhead can be used if there is only one arrow on an icon to reduce excessive visual weight, for example, for navigation arrows, such as back and forward, up and down.

90° arrowhead and 2px square stroke body.	Back arrow with unfilled arrowhead to compensate visual weight.

Do not use other arrow styles, for example, unfilled arrows or arrows with thinned tails.

Incorrect

Do not use color as the only differentiator between icons (except for the Noun icon) because some people do not distinguish colors. Make sure that icons are easily distinguishable by their shape.

Do not use gradients or shadows.

Action icons

An action icon is an icon that triggers an action. It usually appears on toolbars and in dialogs. There are 5 colors in the action icons palette. The dark version is for Darcula theme.

Red #DB5860	Red dark #C75450
Yellow #EDA200	Yellow dark #F0A732
Green #59A869	Green dark #499C54
Blue #389FD6	Blue dark #3592C4
Grey #6E6E6E	Grey dark #AFB1B3

Use these colors according to the following rules:

1. By default, action icons are grey and monochromatic:

   

2. If an icon falls into one of the categories below, use the corresponding color:

   Green Positive actions: run, create	Red Destructive actions: stop, remove, force
   Blue Accent color to highlight popular icons based on usage statistics, highlight small elements in complex icons	Yellow Warning actions: attract attention to the places (e.g., code) that can be optimized or improved

3. Preserve colors in icon combinations. If an icon is colored in its full size, it should have the same color when reduced.

   

4. Use green and red colors for paired icons. Color helps distinguish between similar icons faster.

   

5. Use grey color for tool window icons. Icons are placed on the perimeter of the IDE, so they should not attract too much attention and distract users.

   

Status icons

Color is a great way to provide status information. Use status icons that are already present in the IDE repository:

If you need a new icon, color it according to its semantics. Make sure that the status icons are easily distinguishable by their form, as many colorblind people find it difficult to distinguish between red and green.

Noun icons

A noun icon is an icon that appears in the tree view to mark different file types. It helps to locate items in the list faster and does not trigger an action.

The palette for noun icons is wider, because there are lots of icons in one set:

Grey #9AA7B0	Grey 80% #9AA7B0 op. 80%	Grey 60% #9AA7B0 op. 60%
Blue #40B6E0	Blue 70% #40B6E0 op. 70%	Blue 60% #40B6E0 op. 60%
Green #62B543	Green 70% #62B543 op. 70%	Green 60% #62B543 op. 60%
Yellow #F4AF3D	Yellow 70% #F4AF3D op. 70%	Yellow 60% #F4AF3D op. 60%
Purple #B99BF8	Purple 70% #B99BF8 op. 70%	Purple 60% #B99BF8 op. 60%
Pink #F98B9E	Pink 70% #F98B9E op. 70%	Pink 60% #F98B9E op. 60%
Red #F26522	Red 70% #F26522 op. 70%	Red 60% #F26522 op. 60%
Red status #E05555	Red status 70% #E05555 op. 70%
Yellow dark #D9A343
Green Android #A4C639
Black text #231F20 op. 70%

Select colors for new icons based on existing colors and users’ habits.

Use colors with 60% opacity and grey 80% for big parts, like folder icons:

Transparent icons are used in both light and dark themes, so in most cases there’s only one version.

Use colors with 70% opacity for medium size elements that occupy about half of an icon, like file type icons:

Use colors without opacity for small elements, like modifiers.

To make a new icon with a letter, reuse letters from existing icons. If there's no suitable letter in existing icons, use a common sans-serif font like Arial or Open Sans.

note

Install the Svgo-compressor plugin in Sketch to optimize icons before save.

Use the SVG format for icons files. Use camelCase capitalization for icon names:

iconName.svg

If an icon is not the same in the dark theme, then also create:

iconName_dark.svg