Docs

Docs

Icons

These icons are designed to fit in with the default theme style.

Open in a
new tab
import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import './lumo-tokens';
import './icons-preview';

export default class LumoIcons extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<icons-preview name="lumo"></icons-preview>`;
  }
}

customElements.define('lumo-icons', LumoIcons);

The icons are drawn on a 24×24 pixel canvas. Each 24×24 canvas has a safe area of approximately 4 pixels around the icon. This gives a 16×16 pixel active area for the icon itself, which allows the icon to be optimized for visual/optical balance.

Usage

Icon icon = new Icon("lumo", "photo");

Size

Use the icon size custom properties to set consistent sizes for all icons across your application. The Lumo icons are drawn on a 24×24 pixel canvas, which the M size fits by default.

In a non-Vaadin application, you need to import the sizing style sheet to use the sizing properties.

import '@vaadin/vaadin-lumo-styles/sizing.js';
DescriptionCSS Custom Property

Large icon

--lumo-icon-size-l:

Medium icon
Default size

--lumo-icon-size-m:

Small icon

--lumo-icon-size-s: