Default Icons

LIVE DEMO

There are two default icon sets: Vaadin and Lumo. You can view all available icons from these sets by visiting live demo.

Declarative Usage

Set an icon for a component with the icon attribute. Use the vaadin: and lumo: prefixes for different icon sets. If no prefix is present, the Vaadin set is used.

<icon icon="vaadin:user"/>
<icon icon="lumo:user"/>

When set through the Studio component inspector, the Choose Icon dialog appears, displaying icon names and preview for easier selection:

choose icon dialog

Programmatic Usage

An icon can be set programmatically to a component:

iconButton1.setIcon(VaadinIcon.USER.create());
iconButton2.setIcon(LumoIcon.USER.create());