Skip to content
CFA Design System

Icons Changelog

@repo/icons

2.0.0

Major Changes

  • #2316 13325cf Thanks @mitchellcarroll! - Updated @cfa/icons color presets to use @cfa/design-tokens-core tokens and renamed preset values.

    • Renamed color="primary" to color="brand" on brand and system icons. color="white" is unchanged.
    • Brand and system icons still default to currentColor when no color prop is set. brand follows the active theme, red or navy.
    • Logo components use color="brand-red" (default) and color="white" only. brand-red is fixed CFA red for trademark compliance.
    • Requires @cfa/design-tokens-core CSS where preset colors are used.

    See packages/icons/MIGRATION.md for the full migration guide.

    Migration

    // Brand and system icons
    <Restaurant color="primary" size="md" />  →  <Restaurant color="brand" size="md" />
    <Close color="white" />
    

    // Logos
    <Symbol color="primary" />  →  <Symbol color="brand-red" />
    

    // Still supported. Inherits from the parent when no color prop is set.
    <IconButton variant="primary"><Close /></IconButton>

Minor Changes

  • #2083 862a9e6 Thanks @stevegreco! - Added programmatic query APIs and an MCP server so agents can look up CFA components, props, tokens, and icons without reading source.

    • @cfa/design-system-mcp ships the cfa-design-system-mcp server with list_components, get_component_props, get_component_guidance, search_tokens, suggest_token, search_icons, and get_icon.
    • @cfa/react-core/query exports listComponents, getComponentProps, and getComponentGuidance.
    • @cfa/design-tokens-core/query exports searchTokens and suggestTokens.
    • @cfa/icons/query exports searchIcons and getIcon.

  • #2377 ad0d7fe Thanks @stevegreco! - Added the Apps system icon to @cfa/icons/system.

  • #2335 14a6f0b Thanks @stevegreco! - Brand, system, and logo entry points now export shared icon props types.

    • Import BrandSystemIconProps from @cfa/icons/brand or @cfa/icons/system.
    • Import LogoIconProps from @cfa/icons/logos.
    import { Home, type BrandSystemIconProps } from "@cfa/icons/brand";
    

    function renderIcon(props: BrandSystemIconProps) {
      return <Home {...props} />;
    }

2.0.0-beta.7

Minor Changes

2.0.0-beta.6

Minor Changes

  • #2335 14a6f0b Thanks @stevegreco! - Brand, system, and logo entry points now export shared icon props types.

    • Import BrandSystemIconProps from @cfa/icons/brand or @cfa/icons/system.
    • Import LogoIconProps from @cfa/icons/logos.
    import { Home, type BrandSystemIconProps } from "@cfa/icons/brand";
    

    function renderIcon(props: BrandSystemIconProps) {
      return <Home {...props} />;
    }

2.0.0-beta.5

Major Changes

  • #2316 13325cf Thanks @mitchellcarroll! - Updated @cfa/icons color presets to use @cfa/design-tokens-core tokens and renamed preset values for clarity.

    • Renamed color="primary" to color="brand" on brand and system icons. color="white" is unchanged.
    • Brand and system icons still default to currentColor when no color prop is set. brand follows the active theme (red or navy).
    • Logo components use color="brand-red" (default) and color="white" only. brand-red is fixed CFA red for trademark compliance.
    • Requires @cfa/design-tokens-core CSS where preset colors are used. Aligns with the semantic color token renames in @cfa/design-tokens-core (content-brand, background-accent-red).

    See packages/icons/MIGRATION.md for the full migration guide.

    Migration

    // Brand and system icons
    <Restaurant color="primary" size="md" />  →  <Restaurant color="brand" size="md" />
    <Close color="white" />
    

    // Logos
    <Symbol color="primary" />  →  <Symbol color="brand-red" />
    

    // Still supported — inherit from parent when no color prop is set
    <IconButton variant="primary"><Close /></IconButton>

Minor Changes

  • #2083 862a9e6 Thanks @stevegreco! - Add programmatic query APIs and an MCP server so agents and tooling can discover CFA components, props, tokens, and icons without reading source.

    • @cfa/design-system-mcp: New MCP server (cfa-design-system-mcp) exposing list_components, get_component_props, get_component_guidance, search_tokens, suggest_token, search_icons, and get_icon.
    • @cfa/react-core/query: listComponents, getComponentProps, and getComponentGuidance for component catalog, prop contracts, and generated usage docs.
    • @cfa/design-tokens-core/query: searchTokens and suggestTokens for token lookup and CSS-property-based suggestions.
    • @cfa/icons/query: searchIcons and getIcon for icon discovery and raw SVG retrieval.

0.7.0

Minor Changes

Patch Changes

0.7.0-beta.1

Patch Changes

0.7.0-beta.0

Minor Changes

0.6.1

Patch Changes

0.6.0

Minor Changes

0.5.1

Patch Changes

0.5.0

Minor Changes

  • #1630 cd68a51 Thanks @stevegreco! - This package is now being published in a “pre” 1.0 state to allow us to test the package and ensure everything is working correctly.

    Icons can be imported in the following way.

    Terminal window
    pnpm install @cfa/icons
    import { ChickenSandwich } from "@cfa/icons/brand";
    import { Check } from "@cfa/icons/system";
    import { Symbol } from "@cfa/icons/logos";

    They can then be utilized using the same size and color props as before.

0.4.0

Minor Changes

0.3.1

Patch Changes

0.3.0

Minor Changes

  • #683 258fd95 Thanks @stevegreco! - - Update the CLI to allow for different SVGR templates to be used for Icons and Logos
    • Added new generate-logos command to generate logo components

0.2.1

Patch Changes