Icons

The webcomponents include a built-in SVG icon catalog based on Heroicons, with local names and some custom or adapted graphics. No separate icon library, font or network request is needed after loading the webcomponents bundle.

Use the names and available styles in the table below, not names copied directly from the Heroicons website. The catalog is a selection, not the complete Heroicons collection.

Available icons

Each preview shows a supported combination of icon and style. A dash means that style is not available. There are 44 icon names and 64 supported combinations. Previews use the same display size to make the shapes easy to compare.

icon	outline	solid	mini	micro
addfolder	-	-	-
adjustment		-	-
back	-	-	-
bigger	-	-		-
bulb		-	-	-
check	-	-	-
check-circle	-	-	-
circle-dots	-	-	-
clipboard		-	-	-
clock		-	-	-
close		-	-
comment	-	-	-
copy		-		-
document		-	-	-
download		-	-
edit	-	-	-
ellipsis	-	-	-
eye	-		-	-
folder		-	-
grid	-		-
image		-	-
info				-
link		-	-
list	-		-
lock	-	-	-
move	-	-		-
pause	-		-	-
play	-		-	-
range		-	-
reload	-	-	-
restore		-	-
right		-	-
save		-	-
settings			-	-
share		-
smaller	-	-		-
trash	-	-	-
unlink		-	-
upload	-	-	-
upwards		-	-	-
user	-	-	-
warning		-	-	-
wifi	-	-	-
zoom		-	-

Icons in buttons

For thermal-btn, choose the icon and its style together:

• icon is the exact, case-sensitive catalog name.
• iconstyle selects outline, solid, mini or micro. It defaults to outline.
• iconstyle alone does nothing. icon alone works only if that icon has an outline version.
• An unknown name or unavailable style renders no icon. There is no fallback to another style.

For example, icon="trash" needs iconstyle="micro"; its default outline combination does not exist.

<thermal-btn icon="download">Download</thermal-btn>
<thermal-btn icon="settings" iconstyle="solid">Settings</thermal-btn>
<thermal-btn icon="trash" iconstyle="micro">Delete</thermal-btn>

The icon appears before the label. Its width is 1.3em, relative to the button's font size, so the button's size also changes the displayed icon size. Choosing micro changes the drawing, not the button size. SVG paths use currentColor, so the icon follows the button's text colour and visual variant.

Keep a visible label when possible. For an icon-only button, provide an accessible name:

<thermal-btn
    icon="settings"
    iconstyle="solid"
    aria-label="Settings"
    tooltip="Settings"
></thermal-btn>

HTML attributes and JavaScript properties

In HTML, use lowercase iconstyle, without a hyphen. In JavaScript, use the camel-cased iconStyle property:

button.icon = 'trash';
button.iconStyle = 'micro';

These examples assume the element is already registered. Before assigning properties to elements created in an HTML document, wait for customElements.whenDefined('thermal-btn'), as shown in the complete example.

The button's variant controls its colours, not the icon style.

Icons in other components

Components that expose icon presentation attributes use the same catalog, but their defaults and target elements differ:

Component	HTML attributes	What they affect	Style when omitted
thermal-btn	icon, iconstyle	Icon before the button label	outline
thermal-dropdown	icon, iconstyle	Icon in the built-in invoker, not its options or arrow	Internal button defaults to outline
thermal-expandable	icon, iconstyle	Icon in the expand/collapse button	outline
thermal-tip	icon, iconstyle	Icon next to the tip text	bulb / outline by default
thermal-loading	icon, iconstyle	Icon shown instead of the spinner when the JavaScript property loading is false	No default; supply both
thermal-app	labelicon, labeliconstyle	Icon in the title button	Internal button defaults to outline
file-download-dropdown	icon, iconstyle	Icon in the download dropdown's invoker	Internal button defaults to outline
group-dropin-input	icon, iconstyle	Icon in the file input button	Internal button defaults to outline

The last two controls require their normal file or group context; icon attributes do not remove those requirements. See Context providers and consumers.

Other attributes such as variant, size or tooltip keep their component-specific meanings. Do not assume an icon attribute is supported by every component.

<thermal-dropdown icon="download" iconstyle="micro">
    <span slot="invoker">Download</span>
    <div slot="option">
        <thermal-btn icon="image">Download image</thermal-btn>
    </div>
</thermal-dropdown>

Here the dropdown and its option use different icons. Set attributes on the element whose appearance you want to change.

Standalone icons

Use thermal-icon to display an icon without a button. It requires no context providers and has no slots or click behaviour of its own.

Unlike the components above, its style attribute is variant, not iconstyle, and has no default. Supply both icon and variant.

Attribute	Value	Effect
icon	Catalog name	Selects the icon
variant	outline, solid, mini or micro	Selects its drawing style
css	CSS declarations	Adds inline styles to the internal SVG, useful for explicit width and height
classes	Space-separated CSS class names	Adds classes to the internal SVG, not to the custom element

All four attributes are optional strings with no initial value. Without either icon or variant, nothing is rendered. Use only supported pairs: currently, changing an already rendered thermal-icon to an unknown name or unsupported style can leave its previous drawing visible.

<thermal-icon
    icon="info"
    variant="outline"
    css="width: 24px; height: 24px"
    style="color: royalblue"
    aria-hidden="true"
></thermal-icon>
<span>Image information</span>

The icon inherits color through currentColor. The style attribute above colours the host element; css sets dimensions on the SVG itself. Document-level CSS classes, including Tailwind utilities, do not cross its shadow root, so setting classes="..." alone does not load or apply an external stylesheet there.

In this example the icon is decorative because the adjacent text conveys its meaning, so it has aria-hidden="true". For an icon that conveys meaning on its own, give the host role="img" and a descriptive aria-label.

Examples

Complete HTML document

This example changes a button's icon after a click. Replace the placeholder URL with the path to your webcomponents IIFE bundle.

DOMContentLoaded waits for the document body and deferred bundle. customElements.whenDefined('thermal-btn') waits for registration, not rendering or asynchronous data loading.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Icons example</title>
    <script defer src="/path-to-your-script/labirthermal.iife.js"></script>
</head>
<body>
    <script>
        function markSaved(event) {
            const button = event.currentTarget;
            if (
                event.defaultPrevented ||
                button.getAttribute('disabled') === 'true'
            ) {
                return;
            }

            button.icon = 'check';
            button.iconStyle = 'micro';
            button.textContent = 'Saved';
            document.getElementById('save-result').textContent = 'Changes saved.';
        }

        document.addEventListener('DOMContentLoaded', async () => {
            await customElements.whenDefined('thermal-btn');

            const button = document.getElementById('save-button');
            button.addEventListener('click', markSaved);
        });
    </script>

    <thermal-btn id="save-button" icon="save" iconstyle="outline">
        Save
    </thermal-btn>
    <output id="save-result" aria-live="polite">No changes saved yet.</output>
</body>
</html>

The button also responds to Enter and Space when focused.