IconiOS

Lucide icon set mapped to theme colors and sizes.

$ npx lumioui add icon

import { Icon } from "@/components/ui/icon/icon";

Props9

name?	IconName	Lucide icon name — e.g. "check", "chevron-down", "star".
color?	keyof ColorTokens \| ColorValue	Color: a theme token ("foreground", "mutedForeground", "primary", …) or hex.
filled?	boolean	Fill the glyph (star, heart, bell).
strokeWidth?	number	Stroke width — default 2.
size?	"sm" \| "md" \| "lg" \| "xl"	Size preset.
className?	string
textClassName?	string	Extra classes for the glyph text (when children is a string).
accessibilityLabel?	string	Icons are decorative by default (hidden from screen readers). Provide a label for a standalone semantic icon — it is exposed with role "image".
children?	React.ReactNode	Custom element (e.g. your own SVG) — overrides `name`.

Icon — Gallerygallery.tsx

icon/variants/gallery.tsx open

Lucide icon set mapped to theme colors and sizes.

import { IconGallery } from "@/components/ui/icon/variants/gallery";

export function Example() {
  return (
    <IconGallery />
  );
}

import * as React from "react";
import { Pressable, View } from "react-native";
import { Icon } from "../icon";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** IconGallery — the core set in a labeled tile grid; tap a tile to preview. */
export function IconGallery() {
  const names = ["mail", "phone", "home", "search", "settings", "heart", "star", "bell", "camera", "map-pin", "music", "calendar"] as const;
  const [preview, setPreview] = React.useState<(typeof names)[number]>("star");
  return (
    <View className="w-full gap-3">
        <Text variant="small" className="text-white drop-shadow">App icons — tap a name to preview</Text>
        <Glass interactive curvature="edge" className="flex-row items-center gap-3 rounded-2xl p-4">
          <Glass interactive curvature="edge" className="h-12 w-12 items-center justify-center rounded-xl">
            <Icon name={preview} size="lg" filled={preview === "heart" || preview === "star"} color={preview === "star" ? "warning" : preview === "heart" ? "destructive" : undefined} />
          </Glass>
          <View className="flex-1">
            <Text className="text-sm font-semibold text-foreground">{preview}</Text>
            <Text variant="muted" className="text-xs">lg · semantic color tokens</Text>
          </View>
        </Glass>
        <View className="flex-row flex-wrap gap-2">
          {names.map((name) => (
            <Glass interactive key={name} curvature="edge" className="w-[30%] rounded-xl">
              <Pressable
                onPress={() => setPreview(name)}
                className="items-center gap-1 py-3"
                accessibilityRole="button"
                accessibilityLabel={`Preview ${name} icon`}
                accessibilityState={{ selected: preview === name }}
                aria-pressed={preview === name}
              >
                <Icon name={name} size="lg" filled={name === "heart" || name === "star"} color={name === "star" ? "warning" : name === "heart" ? "destructive" : undefined} />
                <Text variant="small">{name}</Text>
              </Pressable>
            </Glass>
          ))}
        </View>
      </View>
  );
}

Icon — Sizessizes.tsx

icon/variants/sizes.tsx open

Lucide icon set mapped to theme colors and sizes.

import { IconSizes } from "@/components/ui/icon/variants/sizes";

export function Example() {
  return (
    <IconSizes />
  );
}

import * as React from "react";
import { View } from "react-native";
import { Icon } from "../icon";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** IconSizes — sm through xl on a baseline. */
export function IconSizes() {
  return (
    <View className="w-full gap-3">
        <Text variant="small" className="text-white drop-shadow">Sizes</Text>
        <Glass interactive curvature="edge" className="flex-row items-end gap-4 rounded-2xl p-4">
          <Icon name="bell" size="sm" />
          <Icon name="bell" size="md" />
          <Icon name="bell" size="lg" />
          <Icon name="bell" size="xl" />
        </Glass>
      </View>
  );
}