Icons

Icons are used for the favicon, header icon, apple touch icon, and panel toggle button.

Static override

Replace the defaults by placing files with the same names in app/assets/images/layered_ui/ in your host app.

Icon files
File	Used for
`icon_light.svg`	Favicon and header icon (light theme)
`icon_dark.svg`	Favicon and header icon (dark theme)
`apple_touch_icon.png`	Apple touch icon

Dynamic override

Override icons per-request in your controller or view:

@l_ui_icon_light_url = @tenant.icon_light_url
@l_ui_icon_dark_url = @tenant.icon_dark_url
@l_ui_apple_touch_icon_url = @tenant.apple_touch_icon_url
@l_ui_panel_icon_light_url = @tenant.panel_icon_light_url
@l_ui_panel_icon_dark_url = @tenant.panel_icon_dark_url

Styling overrides

To adjust icon sizing (e.g. the header icon), override .l-ui-header__icon in layered_ui_overrides.css. See the Tier 3 section of that file for an example.

The panel button icon uses an inline SVG that inherits its color from color via currentColor. To recolor it, override the --button-primary-icon Tier 2 token (see the colors page).

To replace the icon image entirely, set @l_ui_panel_icon_light_url (shown in light mode) and/or @l_ui_panel_icon_dark_url (shown in dark mode). Each theme independently falls back to the inline SVG when its variable is unset.