Propel

Icon

A decorative glyph slot that renders an SVG icon, sized and tinted from its container.

Show code
import { Icon } from "@makeplane/propel/components/icon";
import { Sparkles } from "lucide-react";

export default function BasicDemo() {
  return <Icon icon={Sparkles} size="md" />;
}

Installation

import { Icon } from "@makeplane/propel/components/icon";

Usage

import { Icon } from "@makeplane/propel/components/icon";
import { Sparkles } from "lucide-react";

export default function BasicDemo() {
  return <Icon icon={Sparkles} size="md" />;
}

Examples

Tints

The tint axis colors the glyph. inherit (the default) takes currentColor from the container; the semantic tints override it. placeholder is the input-adornment tint — muted at rest, brightening when the enclosing control is focused — while muted is its plain static form.

Show code
import { Icon } from "@makeplane/propel/components/icon";
import { CircleAlert, Folder, Hash, Search, UserRound, Users } from "lucide-react";

export default function TintsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Icon icon={Folder} tint="inherit" />
      <Icon icon={Users} tint="secondary" />
      <Icon icon={Hash} tint="tertiary" />
      <Icon icon={Search} tint="placeholder" />
      <Icon icon={UserRound} tint="muted" />
      <Icon icon={CircleAlert} tint="danger" />
    </div>
  );
}

Sizes

size pins the glyph: sm 14 / md 16 / lg 20 px. It defaults to inherit, which takes the size from the surrounding control’s --node-size — that is what you want almost everywhere, since every sized component already sets it. Reach for an explicit step only outside such a container.

Show code
import { Icon } from "@makeplane/propel/components/icon";
import { Sparkles } from "lucide-react";

export default function SizesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Icon icon={Sparkles} size="sm" />
      <Icon icon={Sparkles} size="md" />
    </div>
  );
}

API Reference

Icon

Public decorative icon slot. Pass the element this creates into components with icon slots (`startIcon`, `endIcon`, or `icon`) so those components render it directly.

PropTypeDefaultDescription
icon(required)IconSource—SVG component or node rendered inside the shared icon slot, e.g. `icon={Plus}`.
tint"inherit" | "danger" | "placeholder" | "muted" | "secondary" | "tertiary"—
size"inherit" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"—