Skip to main content
Designsystemet logoDesignsystemet logo

What are you looking for?

Try searching for…

Use tokens to colour graphics

With Designsystemet, you can colour graphics using tokens.

DesignsystemetAugust 10, 2026
Illustration showing four colour tokens connected to different parts of the design system logo with dashed lines. The tokens control the colours of the four sections of the logo.
Illustration showing four colour tokens connected to different parts of the design system logo with dashed lines. The tokens control the colours of the four sections of the logo.
Click the image or press Escape to close
Colour tokens can be used to colour logos, icons, and illustrations. The techniques described in this article provide robust and flexible control over colours in SVG graphics.

Graphics are an important part of the user experience, but they are often created with static colors that need to be updated manually whenever the visual identity changes. In addition, the same graphic is frequently used in both light and dark themes, which does not always produce optimal results. By using design tokens in SVG graphics, illustrations, icons, and other graphical elements can follow the same color system as the rest of the solution. This makes graphics easier to maintain, improves consistency across products, and simplifies the management of themes, branding updates, and accessibility requirements. In this article, we take a high-level look at why using tokens to color graphics is beneficial and how you can get started. The approach described here, wrapping the graphics using symbol elements within SVG files, can also serve as a foundation for providing multiple illustrations within a single SVG file.

Why use tokens to control colours in graphics?

There are three main benefits to using design tokens for color management:

  • Maintaining consistent use of brand colors
  • Supporting both light and dark themes
  • Making graphics easier to maintain over time

The methods described in this article are not relevant if your graphics should look exactly the same in both light and dark themes and use the colors defined in the design tool.

How to use colour tokens for graphics

If you want to control colours and scaling through code, for example by using design tokens, your graphics need to be added as SVGs and structured in a way that allows them to be styled with CSS.

There are two main approaches:

  • Embedding SVG markup inline in the HTML
  • Referencing SVG graphic with <use> and <symbol> for reuse

Both approaches work well. Using <use> together with <symbol> is useful when the same graphic needs to be reused in multiple places without duplicating code, while inline SVG provides full control and is often simpler when the graphic is only used in a single location.

When SVG is used inline or through <use>, both colours and sizing can be controlled with CSS. This requires the SVG to be set up correctly, including a viewBox attribute.

Other ways of using graphics in frontend applications, such as <img src="...svg">, canvas, CSS-generated graphics, or icon fonts, do not provide the same level of control over colours through design tokens. These approaches are therefore outside the scope of this article.

Basic setup

For an SVG to be reusable and easy to style, a few prerequisites should be in place.

When using graphics as an external file with <use>:

  • The graphic should be wrapped in a <symbol> element
  • The symbol should have an ID
  • The graphic should be referenced using <use> together with the file path and symbol ID

When using graphics either inline or as an external file:

  • A viewBox attribute should be defined on the <svg> or <symbol> element

Practival examples

Using SVG Symbols for Reuse

Wrap the graphic in a <symbol> element and give it a unique ID:

The graphic can then be referenced in HTML using <use>:

Tip: You can store multiple symbols or icons in the same SVG file by wrapping each one in its own <symbol> element and assigning a unique ID to each symbol.

Alternatively, Embed the Graphic Inline

Using <use> makes it possible to reuse the same SVG without duplicating the markup in multiple places. If the graphic is only used once on a page, however, embedding the SVG inline is often the simpler option. When used inline, the example above does not require a <symbol> element or an ID:

Tip: Scaling SVGs


SVGs scale most easily when:

  • A viewBox is defined on the <symbol> element when referenced as a file, or on the <svg> element when embedded inline
  • The size is controlled through the width and height attributes of the outer element
  • The aspect ratio is defined correctly

Coouring graphics

What you need to do next depends on the result you want to achieve.

Single-colour graphics

Many logos and icons consist of a single colour. For these graphics, colours can either be inherited from the current text colour or controlled through a class or ID.

Using the Current Text Colour

If you want SVG graphics to use the current text colour by default, you can use currentColor. Remove any hard-coded colours from the SVG and set fill="currentColor". Depending on the graphic, you may need to do the same for stroke.

If you do not want to apply this rule to all SVGs, you can instead set currentColor directly on the fill and/or stroke attributes within the SVG. This is the approach used for icons in the design system, for example in buttons.

The example below shows a graphic embedded inline and coloured using currentColor:

Using a Colour Token

If you need more control over the colour, you can assign a class or ID to the surrounding SVG element. Remove any hard-coded colours from the graphic and add a class to the outer SVG element:

Then use a design token to define the colour:

Single-colour Graphics Controlled by data-color and data-color-scheme

The same graphic may need to be reused in different contexts. At the same time, it should follow the colour and colour mode defined for the section of the page where it is displayed.

In these situations, you can use generic design tokens that inherit data-color and data-color-scheme values from the nearest parent element.

In the examples below, the SVG itself only uses the --ds-color-base-default token, while the surrounding cards define data-color and data-color-scheme values that control the graphic's colour and colour mode. This allows the same SVG graphic to be reused in different contexts while automatically adapting to the colour settings of the area in which it is displayed.

Multi-colour graphics

Multi-colour graphics are commonly used for brand assets, illustrations, and other visual elements that rely on more than one colour.

For graphics with multiple colours, you can control the colours directly through the fill and stroke attributes of each path in the SVG. These values can reference design system colours directly, or use dedicated illustration tokens if your design system provides them.

The SVG file used in the example above looks like this:

Multi-colour Graphics Embedded Inline

The same approach can also be used when embedding the SVG inline rather than referencing it with <use>.

Accessibility

To ensure that graphics are accessible to everyone, a few attributes should be added to the outer <svg> element:

  • Use aria-hidden for decorative graphics
  • Use aria-label together with role="img" for meaningful graphics

Decorative graphics

If a graphic is purely decorative, it should be hidden from assistive technologies by marking it as presentational and setting it to be hidden.

Meaningful graphics

If a graphic conveys information, it should be given the image role and a descriptive text alternative.

For more complex graphics, more detailed descriptions may be needed. There are several ways to provide richer descriptions directly within SVG graphics, but those techniques are outside the scope of this article.

Troubleshooting

If your SVG does not behave as expected, these are the most common causes to investigate.

  • SVG has the wrong size

    • Check that a viewBox attribute is defined
    • Check that width and height are defined on the HTML element (use or if inline svg) or set through CSS

  • Colours do not change

    • Check that the SVG is embedded inline in the DOM and not loaded through <img>
    • Check that fill and stroke are not hard-coded to fixed colour values
    • Check that the CSS variables (var(...)) are defined and available where the SVG is used

  • A Multi-colour graphic appears as a single colour

    • Check whether currentColor is applied to all paths
    • Check for global CSS rules that affect all SVG elements

  • Graphics does not show at all

    • Check that the href in <use> points to the correct file and symbol ID (file.svg#id)
    • Check that the SVG file contains a <symbol> element with the expected ID

Sources and further reading

Want to write for the blog?

Do you have something you want to share with others in the community? Contact us on Slack or by email