Icon

A wrapper for Lucide Icons with optional settings for size, color, fill, stroke, and custom classes. Browse available icons in the Lucide library to see what you can use.

TailwindCSS

package showcase

import "github.com/axzilla/templui/pkg/icons"

templ IconDefault() {
	<div class="flex flex-wrap gap-2">
		@icons.User(icons.IconProps{Size: "24"})
		@icons.House(icons.IconProps{Size: "24"})
		@icons.Settings(icons.IconProps{Size: "24"})
	</div>
}

Usage

@icons.ArrowRight(icons.IconProps{...})

Examples

Colored

package showcase

import "github.com/axzilla/templui/pkg/icons"

templ IconColored() {
	<div class="flex flex-wrap gap-2">
		@icons.Heart(icons.IconProps{Size: "24", Color: "red"})
		@icons.Star(icons.IconProps{Size: "24", Color: "gold"})
		@icons.Check(icons.IconProps{Size: "24", Color: "green"})
	</div>
}

Filled

package showcase

import "github.com/axzilla/templui/pkg/icons"

templ IconFilled() {
	<div class="flex flex-wrap gap-2">
		@icons.Circle(icons.IconProps{Size: "24", Fill: "blue", Stroke: "blue"})
		@icons.Square(icons.IconProps{Size: "24", Fill: "purple", Stroke: "purple"})
		@icons.Triangle(icons.IconProps{Size: "24", Fill: "orange", Stroke: "orange"})
	</div>
}

Sizes

package showcase

import "github.com/axzilla/templui/pkg/icons"

templ IconSizes() {
	<div class="flex flex-wrap gap-2">
		@icons.House(icons.IconProps{Size: "16"})
		@icons.House(icons.IconProps{Size: "24"})
		@icons.House(icons.IconProps{Size: "32"})
		@icons.House(icons.IconProps{Size: "48"})
	</div>
}

Custom Classes

package showcase

import "github.com/axzilla/templui/pkg/icons"

templ IconCustomClasses() {
	<div class="flex flex-wrap gap-2">
		@icons.ArrowRight(icons.IconProps{Size: "24", Class: "text-blue-500 hover:text-blue-700"})
		@icons.ArrowLeft(icons.IconProps{Size: "24", Class: "text-green-500 hover:text-green-700"})
	</div>
}

Getting Started

Components

Icon

Usage

Examples