In-app icons design#

Interface Icons#

Interface icons communicate either status or action displays, such as battery level or an alarm, whilst also enabling the user to perform actions like opening a menu, sharing content or print a document. The interface icons are located in the top bar or in-app icons, such as in the Header or the menus.

stock_message.svg share.svg stock_alarm-clock.svg security-alert.svg settings.svg

See a list of the icons. available in the system.

Color#

Interface icons can be colourized in qml therefore are designed in #808080 color.

Font#

To provide a consistent look to the UI and to make the Suru icons distinctive, the design is based on the same patterns as the Ubuntu font. The font patterns can applied to the symbol to define its contours.

../../_images/14.png

Strokes#

Stroke ends are squared but the upper end of vertical strokes is slightly oblique with a +10º angle.

../../_images/15.png

Rotation#

When they are not horizontal or vertical, objects are oriented along a +45º axis.

../../_images/16.png

Corners#

Curved corners are preferred if possible. The following picture shows a zoom on the default outer and inner curvatures, with nodes and Bezier handle. The default curvature can be scaled down when the shape is smaller.

../../_images/17.png

Arrows#

A chevron symbol is used for navigation arrows. The arrowhead is an isosceles triangle where the two equal sides are slightly curved (following the pattern of the Y character).

../../_images/18.png

Opacity#

50% opacity is used to reflect the status of an indicator. In case of a double space (enabled and disabled, for example), the opacity of the whole icon changes. When the status allows a range of values, the opacity of a single portion of icon can be altered.

../../_images/19.png

Grid#

Interface icons are designed for 96x96 pixels, with at least 4 pixels of margin on every side.

../../_images/20.png