Icon

Use it well.

Icons are decorative by default. Label standalone images; name icon-only actions on the button or link. Unknown names return a render error. No fonts, sprites, remote requests or JavaScript are used.

This is the source compiled for the preview. Select the text to copy it, or download the file. Change the package name and demo routes for your application.

package examples

import "github.com/Tend-Stack/TendUI/v2026/components"

templ ExampleIcon() {
	<h3>Small details, clear actions.</h3>
	<p>Icons inherit text color and stay sharp at every size. Visible words remain the clearest way to describe an action.</p>
	<div class="cluster">
		@components.Link(components.LinkProps{Text: "Browse components", Href: "/catalog", IconBefore: components.IconSearch})
		@components.Link(components.LinkProps{Text: "Appearance", Href: "/settings", Outline: true, IconAfter: components.IconArrowRight})
		@components.Link(components.LinkProps{AriaLabel: "Browse all components", Href: "/catalog", Outline: true, IconBefore: components.IconMenu})
		@components.Button(components.ButtonProps{Text: "Upload unavailable", IconBefore: components.IconUpload, Disabled: true})
	</div>
	<p>
		@components.Icon(components.IconProps{Name: components.IconInfo, Size: components.IconSizeSmall})
		Small,
		@components.Icon(components.IconProps{Name: components.IconInfo})
		medium, and
		@components.Icon(components.IconProps{Name: components.IconInfo, Size: components.IconSizeLarge})
		large sizes follow the surrounding text scale.
	</p>
	<p>Standalone image with its own accessible label: @components.Icon(components.IconProps{Name: components.IconCheck, Label: "Complete"})</p>
	@components.Grid(components.GridProps{}) {
		for _, name := range components.IconNames() {
			<p>
				@components.Icon(components.IconProps{Name: name})
				<code>{ string(name) }</code>
			</p>
		}
	}
}