Icons
Displays icons.
By default, tetra-ui uses icons from Lucide, but you can use any SVG icon library you want.
The approach we recommend is to create a styled SVG component with the help of the withUniwind function that you can use throughout your application.
Installation
npx shadcn@latest add @tetra-ui/iconsUsage
import { BadgeCheckIcon } from "@/components/ui/icons";<BadgeCheckIcon />API Reference
Icons
Exported icons (for example BadgeCheckIcon, ChevronRightIcon) are Lucide icons wrapped with Uniwind. They accept Lucide React Native props plus className, and default to size-6 text-foreground.
Changelog
2026-07-08 - Renamed createStyledSvg to createStyledIcon
Renamed the createStyledSvg function to createStyledIcon to better reflect its purpose.
2026-02-12 Added Lucide Icons
Use Lucide icons as the default icon set.
2025-12-03 Updated Styling
Updated the configuration for withUniwind so that stroke classes are used.