Default Icons

LIVE DEMO

Jmix includes over 600 built-in icons organized into three icon sets:

Jmix

Default icon set. It combines all Vaadin icons, Lumo icons not present in Vaadin, and Jmix-specific icons.

Vaadin

Icons provided by the Vaadin framework.

Lumo

Icons from the Lumo design system.

Setting Icon via Attribute

Many UI components allow icons to be added through attributes. Some components provide multiple such attributes for different icon slots, such as icon, uploadIcon, downloadButtonIcon, dropLabelIcon.

For example:

<icon icon="USER"/>
<button text="Approve" icon="CHECK"/>
<fileUploadField uploadText="Upload file" uploadIcon="UPLOAD"/>

To use icons from a specific set, add the appropriate prefix:

<icon icon="vaadin:user"/>
<button text="Approve" icon="lumo:checkmark"/>
<fileUploadField uploadText="Upload file" uploadIcon="vaadin:upload"/>

You can browse and select icons in Studio. In the inspector panel, click an icon attribute to open the Choose Icon dialog. The dialog displays available icon sets and lets you select an icon visually.

choose icon dialog

Setting Icon in Nested Element

Some components support adding icons using nested elements that correspond to specific icon slots, such as <icon>, <uploadIcon>, <dropdownIcon>, <prefix>, and <suffix>. This approach allows you to use both built-in and custom icons, including SVGs, font icons, and images.

For example:

<button text="Approve">
    <icon>
        <icon icon="CHECK"/>
    </icon>
</button>
<button text="Start">
    <icon>
        <svgIcon resource="/icons/jmix-icon.svg"/>
    </icon>
</button>
<button text="Download">
    <prefix>
        <fontIcon fontFamily="lumo-icons" charCode="ea17"/>
    </prefix>
</button>
<button text="Create">
    <icon>
        <image resource="/icons/icon.png" width="24px"/>
    </icon>
</button>

Setting Icon Programmatically

Icons can be set programmatically. It is recommended to use the Icons bean as the central interface for creating UI components that represent icons. This ensures consistent behavior (Icons is also used when parsing XML) and simplifies centralized icon overrides.

For example:

helperButton.setIcon(icons.get(JmixFontIcon.QUESTION_CIRCLE));

Nevertheless, it is also possible to bypass the bean and instantiate icons directly from a specific set:

helperButton.setIcon(VaadinIcon.QUESTION_CIRCLE.create());
editorButton.setIcon(LumoIcon.COG.create());