Which Icon Libraries Are Allowed in taste-skill? Phosphor, HugeIcons, Radix, Tabler vs. Lucide

The taste-skill repository explicitly permits @phosphor-icons/react, hugeicons-react, @radix-ui/react-icons, and @tabler/icons-react, while strictly discouraging lucide-react unless explicitly required by a project brief or pre-existing dependency.

Maintaining visual consistency across the taste-skill codebase requires strict adherence to the icon library policy defined in the core design specification. The primary keyword for this guideline—icon libraries taste-skill—centers on a prioritized list that prevents bundle bloat and design fragmentation while allowing only conditional exceptions for legacy or requested alternatives.

Allowed Icon Libraries in taste-skill

The repository enforces a strict priority order when selecting icon libraries. Developers must choose the first library in the sequence that satisfies their specific UI need.

Primary Choice: Phosphor Icons

@phosphor-icons/react serves as the default and highest-priority icon set for all new components. This library should be your first choice when adding any iconographic element to the interface.

// Example: using Phosphor Icons (the top-priority choice)
import { ArrowRight } from "@phosphor-icons/react";

export function CTAButton() {
  return (
    <button className="flex items-center gap-2 text-primary">
      Continue
      <ArrowRight weight="bold" className="h-5 w-5" />
    </button>
  );
}

Large-Scale UI: HugeIcons

hugeicons-react provides large-style icons designed for prominent UI elements and feature highlights. Use this library when the design calls for oversized or heavyweight iconography that Phosphor does not provide in the required style.

Minimal Primitives: Radix Icons

@radix-ui/react-icons supplies minimal UI primitives that align closely with the Radix UI component system. These work best for subtle interface controls and standard application chrome where a lightweight visual treatment is preferred.

Fallback Option: Tabler Icons

@tabler/icons-react acts as the final fallback when the above libraries lack a specific required glyph. Only reach for Tabler after confirming that Phosphor, HugeIcons, and Radix do not contain a suitable alternative.

import { Calendar } from "@phosphor-icons/react";
import { Calendar as CalendarHuge } from "hugeicons-react";
import { Calendar as CalendarRadix } from "@radix-ui/react-icons";

export function CalendarIcon({ size = 20 }) {
  // Try Phosphor first; if unavailable, fall back sequentially.
  const Icon = Calendar ?? CalendarHuge ?? CalendarRadix;
  return <Icon className={`h-${size} w-${size}`} />;
}

Discouraged Icon Libraries (Lucide)

lucide-react is explicitly discouraged in the taste-skill ecosystem. According to skills/taste-skill/SKILL.md (lines 42-44), you may only use this library under two specific conditions: when a project brief explicitly requests it, or when the project already depends on it as a legacy import. Mixing Lucide with any approved icon families within the same component tree is strictly prohibited to prevent visual inconsistency.

// Use Lucide only if the project already depends on it *and* the brief asks for it.
import { Sun } from "lucide-react";

export function ThemeToggle({ useLucide = false }) {
  if (!useLucide) return null; // safeguard – avoid accidental import
  return (
    <button aria-label="Toggle theme">
      <Sun className="h-5 w-5" />
    </button>
  );
}

Why the Icon Policy Exists

The restriction on icon libraries taste-skill developers can use stems from five architectural priorities documented in the repository's design specification:

• Consistency: Restricting the UI to a single icon family per project ensures uniform visual weight, stroke width, and style across all components.
• Bundle size control: Importing multiple large icon packages inflates the JavaScript bundle and degrades performance. The priority list ensures the smallest viable set is chosen.
• Avoid naming collisions: Different libraries expose icons with identical component names (e.g., Home). Enforcing one library eliminates ambiguous imports and shadowing errors.
• Design-system alignment: The allowed libraries integrate cleanly with the default Tailwind + Radix Themes stack used throughout the repo. Lucide is not part of that stack, so its design tokens can clash with the global strokeWidth standard.
• Explicit opt-in: When a brief explicitly asks for Lucide, developers can add it deliberately, documenting the deviation. This makes the exception visible in code reviews.

Implementation Best Practices

When implementing icons according to the taste-skill specification, maintain a consistent strokeWidth (typically 1.5) across all approved libraries. Wrap icons in a helper component to enforce this standard globally:

type IconProps = {
  Component: React.ComponentType<React.SVGProps<SVGSVGElement>>;
  className?: string;
};

export const StandardIcon = ({ Component, className }: IconProps) => (
  <Component strokeWidth={1.5} className={className} />
);

// Usage
import { ArrowRight } from "@phosphor-icons/react";

export function Example() {
  return <StandardIcon Component={ArrowRight} className="h-5 w-5" />;
}

Key Configuration Files

The icon library policy is governed by the following files in the Leonxlnx/taste-skill repository:

• skills/taste-skill/SKILL.md – Contains the definitive allowed and discouraged icon list in section 3.C (lines 40-45), along with broader UI conventions.
• skills/taste-skill-v1/SKILL.md – Reinforces the same icon policy for first-generation skill implementations.
• README.md (repo root) – Provides general repository overview and references to design guidelines.

Summary

• Allowed libraries (in priority order): @phosphor-icons/react, hugeicons-react, @radix-ui/react-icons, @tabler/icons-react.
• Discouraged library: lucide-react (use only with explicit project requirement or existing dependency).
• Source of truth: skills/taste-skill/SKILL.md lines 40-45.
• Key constraint: Never mix Lucide with approved libraries in the same component tree.
• Technical standard: Maintain consistent strokeWidth (1.5) via wrapper components when possible.

Frequently Asked Questions

What should I do if Phosphor Icons does not have the icon I need?

If @phosphor-icons/react lacks a specific glyph, fall back sequentially through the approved list: first check hugeicons-react, then @radix-ui/react-icons, and finally @tabler/icons-react as the last resort. This priority system ensures you maintain the smallest possible bundle size while finding the required asset.

Can I use Lucide React if it is already in my project's package.json?

Yes, but only under strict conditions. According to skills/taste-skill/SKILL.md, you may use lucide-react if the project already depends on it, provided you do not mix Lucide icons with any approved library (Phosphor, HugeIcons, Radix, or Tabler) in the same component tree. Document this exception in your pull request description for code review visibility.

Why is Lucide discouraged while Tabler is allowed?

Although both libraries offer similar iconography, lucide-react is not part of the default Tailwind + Radix Themes stack used throughout taste-skill. Its design tokens and stroke defaults can clash with the repository's global styling standards, whereas the approved libraries integrate seamlessly with the established visual system and bundle configuration.

How do I enforce consistent stroke width across different icon libraries?

Create a wrapper component that accepts the icon component as a prop and applies a standardized strokeWidth (e.g., 1.5) before rendering. This approach ensures visual uniformity even when switching between approved libraries like Phosphor and Radix, which may have different default stroke weights.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}