Line, solid and logo variants
SGDS icons (govicons) are available in line, solid and logo variants.
Occasionally, only one style is available for aesthetic reasons.
Principles for using icons clearly, consistently, and accessibly across SGDS interfaces.
Icons should be consistent in layouts, not only in their look and feel but in their placement within a page or component.
An eye-catching and appealing graphic helps people perform tasks quicker and more easily.
Reduce the amount of graphic details by focusing on the basic characteristics of the object rather than creating a highly realistic image in order to speed up recognition.
Icons, like all elements of good design, must have a clear purpose. Before you even think about what sort of icons you want, you need to ask yourself: why?
The promise of nascent technologies, such as SVG and icon fonts, is yet to be realised, so for now we have to think about size and scalability.
Icons are fast to recognise at a glance, if well designed. This is particularly true for standard icons that people have seen and used before.
To help overcome the ambiguity that almost all icons face, a text label must be present alongside an icon to clarify its meaning in that particular context.
Characteristics that define how SGDS icons look, behave, and work across interface contexts.
SGDS icons (govicons) are available in line, solid and logo variants.
Occasionally, only one style is available for aesthetic reasons.
Set the size of icons using icon-size tokens. Available sizes on our system:
Icons are drawn on a pixel-based grid of 24 × 24 px and scaled down linearly to different sizes. Use the grid as your basic guideline to snap the artwork in place.
The grid contains 2 px padding, which helps icons retain their desired scale.
White space surrounding the 20 × 20 px live area.
Keylines give you consistent sizes for basic shapes or proportions across the icon set. These basic shapes help unify system icons and regulate their placement on the icon grid.
Available shapes on our system:
Corner radius is 2 px by default. Interior corners should be square if the radius is 1 px.
The 2 px radius can be increased by 2 px when necessary to make the icon's metaphor clear. Use an additional radius to make the metaphor reflect the real form of the object.
Stroke placement affects an icon's overall appearance, depending on whether the stroke is placed on the inside, centre, or outside of a shape. In most cases, the stroke is best aligned with the centre of a shape.
Use consistent rounded stroke terminals.
Use consistent rounded stroke terminals.
Use a consistent stroke width, including curves, angles, and both interior and exterior strokes.
One icon should not look heavier or lighter than other icons of the same size. Maintain the same visual weight by using a 1.25 px stroke when designing all icons.
Use 45 degree angles for even anti-aliasing whenever that angle is logical or use increments of 15 degree for all other angles. You can create harmony across the icon set by making angles sit on the same increments.
If an icon requires complex details, subtle adjustments can be made to improve its legibility. These adjustments are referred to as optical corrections.
Use the right icon size within containers such as icon buttons.
Icon sizes are optimised to feel balanced when paired with buttons, text links, body copy or actionable elements.
Keep at least 2 px of counter space between lines or shapes.
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.