Server Component · 0 KB client JS

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>
  );
}

size

color

import { Icon } from "astralis-ui";

<Icon>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8-6.2-3.2-6.2 3.2L7 14.2 2 9.3l6.9-1z" />
  </svg>
</Icon>

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" alignItems="start">
      <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`	None	An icon component to render, such as one from Lucide.
`children`	`ReactNode`	None	Or a raw svg element, which fills the sized wrapper.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| number`	`"md"`	A size token, or an explicit size in pixels.
`color`	`text color token \| CSS color`	None	Omit it and the icon inherits the surrounding text color through currentColor.
`strokeWidth`	`number`	None	Passed to icon components drawn with strokes. Has no effect on raw svg children.

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.