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 { AiStar1Outline } from "@makeplane/propel/icons";

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

Installation

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

Usage

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

export default function BasicDemo() {
  return <Icon icon={AiStar1Outline} 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 {
  AlertCircleOutline,
  FolderOutline,
  HashOutline,
  SearchOutline,
  UserAltOutline,
  MembersOutline,
} from "@makeplane/propel/icons";

export default function TintsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Icon icon={FolderOutline} tint="inherit" />
      <Icon icon={MembersOutline} tint="secondary" />
      <Icon icon={HashOutline} tint="tertiary" />
      <Icon icon={SearchOutline} tint="placeholder" />
      <Icon icon={UserAltOutline} tint="muted" />
      <Icon icon={AlertCircleOutline} tint="danger" />
    </div>
  );
}

Sizes

size pins the glyph to a ladder rung: xs and sm 14 px, md, lg and xl 16 px, 2xl 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 { AiStar1Outline } from "@makeplane/propel/icons";

export default function SizesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Icon icon={AiStar1Outline} size="sm" />
      <Icon icon={AiStar1Outline} 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"—