Icons in an app should aim to represent the intended symbolism while having a distinct Canva personality. To ensure consistency, Canva provides guidelines to help design and prepare icon assets for use in the product.
Sizing
The four sizes of icons we currently support are:
- Tiny - 12px
- Small - 16px
- Medium - 24px Default
- Large - 32px.
Icons in the starter kit
You can browse the starter kit icon repository for icons you can use in your app.
For the steps to download the starter kit, see Setting up the starter kit.
Accessibility
Icons are not accessible without additional markup. Markup depends on how the icon is used, though generally it can be broken down into three categories: decorative, interactive, and indicative icons.
Decorative icons
Decorative icons are purely cosmetic and convey no real semantic meaning — if they were removed no context would be lost — and are typically used for visual reinforcement or branding. Decorative icons are paired with text, such as in lists or inputs, which provide the context for sighted and screen reader users.
Icons have the aria-hidden="true" attribute by default, meaning that they’re invisible to screen readers and support this use case as default.
Interactive icons
Interactive icons do convey meaning to users. The most common example is buttons or links, which are icon only.
Interactive icons should be the child of a <button> or <a> element, which provides meaning by using text content, aria-label, or aria-labelledby.
Indicative icons
Indicative icons aren’t interactive, though the icon does convey meaning. This is useful for statuses or when icons are used in place of text inside a longer message.
Either way, it must be communicated by using invisible content available to screen readers or the surrounding content.