Docs

You are viewing documentation for an older Vaadin version. View latest documentation

Docs

Icons

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

Open in a
new tab
import '@vaadin/vaadin-lumo-styles/icons';
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 – giving a 16×16 pixel active area for the icon itself – allowing for optimizing each icon for visual/optical balance.

Usage

In server-side views (Flow/Java):

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 – the M size fits that by default.

Description CSS Custom Property

Large icon

--lumo-icon-size-l:

Medium icon
Default size

--lumo-icon-size-m:

Small icon

--lumo-icon-size-s: