My Design System

My Design System

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 – 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");

In client-side views (Fusion/TypeScript):

import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators';
import '@vaadin/vaadin-icon/vaadin-icon';
import '@vaadin/vaadin-lumo-styles/vaadin-iconset';

@customElement('photo-icon-example')
export class PhotoIconExample extends LitElement {
  render() {
    return html`<vaadin-icon icon="lumo:photo"></vaadin-icon>`;
  }
}

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.

In client-side views (Fusion/TypeScript), you need to import the sizing style sheet to use the sizing properties.

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

Large icon

--lumo-icon-size-l:

Medium icon
Default size

--lumo-icon-size-m:

Small icon

--lumo-icon-size-s: