tetra-ui
uiiconssource: ok · refreshed
Icons
Icon components styled with Tailwind classes for React Native.
npx shadcn add "https://tetra-ui.com/r/icons.json"free
No selection tags yet — empty means no evidence, not lack of support.
Dependencies
Bundle weight · lightreact-native-svg
Files2 · source cached 10/8/2026, 8:10:06 AM
ui/icons/index.ts
export type { LucideIcon } from "lucide-react-native";
import {
Archive,
BadgeCheck,
Bell,
BookOpen,
CalendarPlus,
Check,
ChevronDown,
ChevronLeft,
ChevronRight,
CircleAlert,
CircleCheck,
EllipsisVertical,
Eye,
EyeOff,
Info,
Mail,
Moon,
Pin,
Plus,
Search,
Shield,
ShoppingCart,
Sun,
Trash2,
TriangleAlert,
X,
} from "lucide-react-native";
import { createStyledIcon } from "./styled-icon";
export * from "./styled-icon";
export const ArchiveIcon = createStyledIcon(Archive);
export const BadgeCheckIcon = createStyledIcon(BadgeCheck);
export const BellIcon = createStyledIcon(Bell);
export const BookOpenIcon = createStyledIcon(BookOpen);
export const CalendarPlusIcon = createStyledIcon(CalendarPlus);
export const CheckIcon = createStyledIcon(Check);
export const CircleAlertIcon = createStyledIcon(CircleAlert);
export const CircleCheckIcon = createStyledIcon(CircleCheck);
export const ChevronDownIcon = createStyledIcon(ChevronDown);
export const ChevronLeftIcon = createStyledIcon(ChevronLeft);
export const ChevronRightIcon = createStyledIcon(ChevronRight);
export const EllipsisVerticalIcon = createStyledIcon(EllipsisVertical);
export const EyeIcon = createStyledIcon(Eye);
export const EyeOffIcon = createStyledIcon(EyeOff);
export const InfoIcon = createStyledIcon(Info);
export const MailIcon = createStyledIcon(Mail);
export const MoonIcon = createStyledIcon(Moon);
export const PinIcon = createStyledIcon(Pin);
export const PlusIcon = createStyledIcon(Plus);
export const SearchIcon = createStyledIcon(Search);
export const ShieldIcon = createStyledIcon(Shield);
export const ShoppingCartIcon = createStyledIcon(ShoppingCart);
export const SunIcon = createStyledIcon(Sun);
export const TrashIcon = createStyledIcon(Trash2);
export const TriangleAlertIcon = createStyledIcon(TriangleAlert);
export const XIcon = createStyledIcon(X);
ui/icons/styled-icon.tsx
import type { LucideIcon } from "lucide-react-native";
import Svg from "react-native-svg";
import { withUniwind } from "uniwind";
import { cn } from "@/lib/utils";
const styledSvgOptionMapping = {
height: {
fromClassName: "className",
styleProperty: "height",
},
style: {
fromClassName: "className",
},
width: {
fromClassName: "className",
styleProperty: "width",
},
} as const;
export const StyledSvg = withUniwind(Svg, styledSvgOptionMapping);
export const createStyledIcon = (Icon: LucideIcon): LucideIcon => {
const UniwindIcon = withUniwind(Icon, styledSvgOptionMapping);
const StyledIcon = ({
className,
...props
}: React.ComponentProps<typeof UniwindIcon>) => {
return (
<UniwindIcon
className={cn("size-6 text-foreground", className)}
{...props}
/>
);
};
return StyledIcon as LucideIcon;
};