Use a 2px stroke as the main drawing line.

For more examples on visual weight compensation, see Optical Effects in User Interfaces. Icon weight can often take priority over the basic shape sizing. The eye icon is less detailed and occupies less space than a more complex scissors icon. Icons with more details should occupy more space. Make the circle diameter 2px bigger than square icons’ height to compensate the visual weight. Following this rule, circles, rhombuses, triangles and other non-square shapes should have larger height and width to be optically balanced with square figures. The more filled an icon is, the less space it needs. Make sure that icons have the same visual weight. Using a grid and basic shapes ensures consistent visual proportions and placement. Use basic shapes to build icons, such as squares, circles and rectangles. Sizes for other icon sizes can be found in the table below: Icon Typeĭefault : toolbar icons, project tree, etc. For default 16px icons, the transparent border is 1px, so the icon’s visible part should be inside the 14px x 14px area.ġ4px x 14px is the area where the visible partĬontent should only go beyond the borders if a modifier is added, or if additional visual weight is required. Leave a transparent padding around the perimeter. Reduced the icon to its minimal form, without losing its meaning.īasically, icons fit into a square artboard. Clean and simple icons ensure readability and reduce visual clutter. Icons should be as simple as possible without losing their meaning. It’s recommended to use 45° and 90° angles, Use straight corners and lines instead of curves. Use flat shapes instead of complex 3d forms. Flat icons remain legible even in small sizes. Use a flat geometric icon style with straight corners and edges. StyleĪ common style unites several icons into a set and makes them recognizable. Use the IntelliJ Icons Figma plugin to quickly find and use icons in UI mockups. Follow these guidelines to create a new icon or redesign an existing one for IntelliJ-based products.

Icons color folder