Create visual consistency
Keep icons consistent in look and placement across pages and components.
Principles for using icons clearly, consistently, and accessibly across SGDS interfaces.
Keep icons consistent in look and placement across pages and components.
Use clear, balanced icons that help users complete tasks quickly.
Focus on the object's basic features. Simple icons are faster to recognise.
Every icon needs a clear purpose. Decide why it is needed first.
Use icons people can recognise at a glance, especially standard icons.
Add a text label when an icon could be unclear in context.
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.