Icons

On this page

DevLab ships a small SVG library and exposes it through devlab.icon. Interface icons use Tabler Icons. Service logos use Simple Icons. All SVGs are bundled with the theme, inherit the surrounding text color, and work in light and dark mode.

GitHub Codeberg Matrix

GitHub {{<devlab.icon name="github" />}}

Icons are decorative by default. Add label when an icon communicates meaning without adjacent text.

Parameter	Required	Default	Description
`name`	Yes	-	Icon name without `.html`.
`size`	No	`inline`	`sm`, `inline`, `md`, or `lg`; invalid values fall back to `inline`.
`label`	No	Empty	Accessible label for a meaningful standalone icon.
`extra_class`	No	Empty	Additional class on the wrapper.

Available names:

Theme: sun, moon, desktop
Social and brand: github, gitlab, codeberg, matrix, zulip, telegram, discord, rss, email, link
Interface: search, chevron-right, external-link, copy, check, info, warning, menu, x, arrow-left, arrow-right, folder, file, terminal, heart

Icon catalog

Icon	Name	Icon	Name
	`sun`		`moon`
	`desktop`		`terminal`
	`search`		`menu`
	`x`		`chevron-right`
	`arrow-left`		`arrow-right`
	`external-link`		`link`
	`copy`		`check`
	`info`		`warning`
	`folder`		`file`
	`rss`		`email`
	`github`		`gitlab`
	`codeberg`		`matrix`
	`zulip`		`telegram`
	`discord`		`heart`

Use an icon from a template

The lower-level SVG component is also global:

<a href="https://github.com/you" aria-label="GitHub">
  {{<devlab.svg_icon name="github" />}}
</a>

To extend the set, use the small partials/icon.html slot described in the Extension API. Keep filenames lowercase and add an accessible label when the icon is not decorative.