Icon

A sizing and coloring wrapper for any icon set — Lucide, Heroicons, or your own SVGs.

"use client";

import { Icon, HStack } from "astralis-ui";
import { Rocket, Star, Compass, Orbit } from "lucide-react";

export function IconDemo() {
  return (
    <HStack gap="4">
      <Icon as={Rocket} />
      <Icon as={Star} />
      <Icon as={Compass} />
      <Icon as={Orbit} />
    </HStack>
  );
}

Import#

import { Icon } from "astralis-ui";
import { Rocket } from "lucide-react"; // bring your own icons

Usage#

Astralis doesn't bundle an icon set — Icon normalizes whatever you use. Pass an icon component via as, or a raw <svg> as children; either way the wrapper controls size and color with tokens.

Sizes#

Token sizes xs–xl, or any explicit pixel number.

"use client";

import { Icon, HStack } from "astralis-ui";
import { Sparkles } from "lucide-react";

export function IconSizes() {
  return (
    <HStack gap="4" alignItems="end">
      <Icon as={Sparkles} size="xs" />
      <Icon as={Sparkles} size="sm" />
      <Icon as={Sparkles} size="md" />
      <Icon as={Sparkles} size="lg" />
      <Icon as={Sparkles} size="xl" />
      {/* Or any explicit pixel value. */}
      <Icon as={Sparkles} size={40} />
    </HStack>
  );
}

Colors#

Semantic text-color tokens — or omit color and the icon inherits the surrounding text color via currentColor, which is why button icons always match their label.

inherits via currentColor

"use client";

import { Icon, Text, HStack, VStack } from "astralis-ui";
import { Heart, CircleCheck, TriangleAlert, Info } from "lucide-react";

export function IconColors() {
  return (
    <VStack gap="4">
      <HStack gap="4">
        <Icon as={CircleCheck} color="success" />
        <Icon as={TriangleAlert} color="warning" />
        <Icon as={Heart} color="error" />
        <Icon as={Info} color="info" />
        <Icon as={Heart} color="muted" />
      </HStack>
      {/* Without a color prop, icons inherit the surrounding text color. */}
      <Text color="subtle" size="sm">
        <Icon as={Heart} size="xs" /> inherits via currentColor
      </Text>
    </VStack>
  );
}

Custom SVGs#

"use client";

import { Icon } from "astralis-ui";

export function IconCustom() {
  return (
    /* A raw <svg> as children — Icon sizes and colors the wrapper. */
    <Icon size="xl" color="info">
      <svg viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8L12 2z" />
      </svg>
    </Icon>
  );
}

Props#

Prop	Type	Default	Description
`as`	`ElementType`	—	An icon component to render (e.g. from Lucide).
`children`	`ReactNode`	—	…or a raw `<svg>`; it fills the sized wrapper.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| number`	`"md"`	Token or pixel size.
`color`	text-color tokens	inherit	Semantic color; omit to inherit `currentColor`.
`strokeWidth`	`number`	—	Forwarded to stroke-based icon sets.

Accessibility#

Icons are decorative by default (aria-hidden). When an icon stands alone as the only content of a control, label the control — see the icon-only pattern on the Button page.