Propel

Icon

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

Basic

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

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

Tints

The tint axis colors the glyph. inherit (the default) takes currentColor from the container; the semantic tints override it.

Show code
import { Icon } from "@makeplane/propel/components/icon";
import { CircleAlert, Folder, Hash, 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={CircleAlert} tint="danger" />
    </div>
  );
}

Magnitudes

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

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

Installation

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

Props

Icon

PropTypeRequiredDescription
tint"inherit" | "danger" | "placeholder" | "secondary" | "tertiary"No
magnitude"inherit" | "sm" | "md"No
iconIconSourceYesSVG component or node rendered inside the shared icon slot, e.g. `icon={Plus}`.