shadimage
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 · light
react-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;
};

More from tetra-ui

Browse all components in this library →