Icon
A wrapper for Lucide Icons that is primarily styled with Tailwind utility classes. Browse the Lucide library to see what you can use.
Source Tailwind CSS
package showcase
import "github.com/templui/templui/components/icon"
templ IconDefault() {
@icon.User(icon.Props{Class: "size-6"})
}
Installation
templui add iconimport "github.com/templui/templui/components/icon"Examples
Colored
package showcase
import "github.com/templui/templui/components/icon"
templ IconColored() {
@icon.Heart(icon.Props{Class: "size-6 text-red-500"})
}
Filled
package showcase
import "github.com/templui/templui/components/icon"
templ IconFilled() {
@icon.Triangle(icon.Props{Class: "size-6 fill-orange-500 stroke-orange-500"})
}
Sizes
package showcase
import "github.com/templui/templui/components/icon"
templ IconSizes() {
<div class="flex flex-wrap gap-2">
@icon.House(icon.Props{Class: "size-4"})
@icon.House(icon.Props{Class: "size-8"})
@icon.House(icon.Props{Class: "size-12"})
</div>
}
API Reference
Required parameter
Hover for description
Icon
Wrapper component for Lucide Icons. Style icons with `icon.Props{Class: "..."}`.
| Name | Type | Default |
|---|---|---|
The name of the Lucide icon to display (e.g., 'heart', 'user', 'star'). | | - |
Tailwind utility classes passed via `icon.Props{Class: "..."}`, for example `size-6 text-red-500 fill-current`. | | |