My Design System

My Design System

Icons

Vaadin Icons is a set of 600+ icons designed for web applications.

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

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

customElements.define('vaadin-icons', VaadinIcons);

The icons are drawn on a 16×16 pixel canvas.

Usage

In server-side views (Flow/Java):

Icon icon = new Icon(VaadinIcon.PHONE);

In client-side views (Fusion/TypeScript):

import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import '@vaadin/vaadin-icon/vaadin-icon';
import '@vaadin/vaadin-icons/vaadin-iconset';

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