The style of our icon means keeping things as simple as possible. We try to make the shape as concise as possible, while still clearly conveying the metaphor. Details are only added when the symbol becomes unrecognizable or loses its meaning without them.

All icons in our system are built within a basic 20×20 pixel grid. This is the main working size, providing a balance between information density and visual readability. It scales well both down (to 16 px) and up (to 24 px), making it versatile for most interface scenarios.

The active (safe) area inside the icon is 16 pixels, leaving a 2-pixel margin on all sides. Most icons try to stay within this area to maintain visual balance. However, this is not a strict limitation — if necessary, for example, if there are protruding elements (arrows, diagonals, serifs) or to achieve optical compensation, it is permissible to go beyond the safe area.

Icons are aligned to the center of the grid by default. The design takes into account the pixel grid to maintain the clarity of the shape. However, deliberate deviations from the pixel grid are allowed in small details if the metaphor requires it. The main body of the icon should be clear and optically balanced.

With scaling, the exact fit to the pixel grid is lost, but given modern displays and rendering, this is not critical — especially when zooming in.

Although all icons are drawn in 20×20 size, if you need to use large versions (32 px and above), we recommend considering the use of illustrations. Unlike icons, illustrations allow you to express the character of the brand through more complex composition and detail, while maintaining stylistic unity.

The interfaces use icons that follow uniform structural rules (size, grid, minimalism). At the same time, marketing or promotional environments may use expressive versions of icons or illustrations with more detailed shapes, colors, or shadows. These are two different modes of use, each with its own logic.

We adhere to a clear size scale:

To improve the readability of icons, we regularly use optical corrections:

But if something can be made square, we will make it square. The example below clearly shows two icons. In the physical object of the folder, there are no rounded corners, so all corners in the symbol are without rounding. But this approach is not suitable for the plasticity of the like icon. Initially, about 10 versions of the like icon were created with different square and rounded parts, but the winning version was the one that, in addition to branding principles, had visual harmony and similarity to the physical object.

We try to give similar icon elements similar rules to make the icon set more consistent. That's why we made the angle of the arrows the same—33.7°C.

The left side of the image below shows the most common shape joints in Muse icons. The right side shows examples of finished icons.

To make the joint look natural, you need to merge two adjacent shapes not by bringing them closer together, but by adding a line that will connect the two shapes strongly, which will avoid visual clutter. The figure below shows the joints of icons made according to this principle.

In order to join the molds correctly, you need to:

There are icons with branding vibes, and there are functional icons, and there is a tendency to use them arbitrarily. To maintain consistency, we have developed some principles for distinguishing between the roles of icons that need to be fixed. One of these principles is the principle of using chevrons and carets.