ENG-3081: Replace Chakra icons with Carbon equivalents and optimize exports

[gilluminate]

Ticket ENG-3081

Description Of Changes

Complete the Chakra-to-Carbon icon migration by replacing all 17 remaining Chakra icon imports with Carbon equivalents across ~25 files, removing the Chakra icon re-exports from fidesui, and optimizing the Carbon icon exports with a curated barrel file.

Code Changes

• Replace all @chakra-ui/icons usage with Icons.* from Carbon across admin-ui and fidesui's internal CheckboxItem component. Icons with Chakra style props (boxSize, mr, color, alignSelf, etc.) are wrapped in Box spans to preserve layout behavior.
• Remove the entire @chakra-ui/icons re-export block from fidesui/src/index.ts (22 icon aliases + createChakraIcon)
• Add fidesui/src/icons/carbon.ts barrel file that explicitly exports only the 85 Carbon icons actually used, replacing export * as Icons from "@carbon/icons-react" (2,445 icons)
• Update 6 internal fidesui files to import from the barrel instead of directly from @carbon/icons-react
• Add a filterable Carbon Icons gallery Storybook story under General/Icons/Carbon Icons
• Move Custom Icons story under General/Icons/Custom Icons to group with Carbon Icons
• Delete the icon-migration POC page and its nav entry

Steps to Confirm

1. Run the admin-ui dev server and navigate around -- icons should render identically to before
2. Open Storybook and navigate to General > Icons > Carbon Icons to see the filterable gallery of all 85 exported icons
3. Verify that General > Icons > Custom Icons still renders the 5 custom SVG icons
4. Confirm no @chakra-ui/icons imports remain in admin-ui (only AccordionIcon, AlertIcon, ListIcon from @chakra-ui/react remain, which are Chakra component icons out of scope)

Pre-Merge Checklist

• Issue requirements met
• All CI pipelines succeeded
• CHANGELOG.md updated
  • Add a db-migration This indicates that a change includes a database migration label to the entry if your change includes a DB migration
  • Add a high-risk This issue suggests changes that have a high-probability of breaking existing code label to the entry if your change includes a high-risk change (i.e. potential for performance impact or unexpected regression) that should be flagged
  • Updates unreleased work already in Changelog, no new entry necessary
• UX feedback:
  • All UX related changes have been reviewed by a designer
  • No UX review needed
• Followup issues:
  • Followup issues created
  • No followup issues
• Database migrations:
  • No migrations
• Documentation:
  • No documentation updates required

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
fides-plus-nightly	Error		Mar 25, 2026 5:05pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
fides-privacy-center	Ignored		Mar 25, 2026 5:05pm

[claude]

Clean, well-scoped migration. The barrel file swap (export * as Icons from "@carbon/icons-react" → curated carbon.ts) is the standout improvement — trimming 2,445 icons down to 85 is a meaningful bundle win with no functional downside.

Suggestions

Close icon size in InfoBox.tsx (line 43) — The close icon changed from boxSize={5} (20px) to size={12} (12px), which doesn't match the boxSize * 4 = px formula used everywhere else in this PR. Likely unintentional; worth double-checking visually.

Color application inconsistency — Two different patterns are used for applying Chakra color tokens to Carbon icons:

• <Box as="span" color="token-name"> (most files in this PR — preferred)
• style={{ color: "var(--chakra-colors-...)" }} (ConsentItem.tsx, GpcMessages.tsx)

The wrapper approach is more resilient. The direct CSS variable string is functional today but is a maintenance risk if Chakra's variable naming ever shifts.

Nice to Have

Redundant CarbonIconType filter in carbon.stories.tsx — export type declarations have no runtime representation so they'll never appear in Object.entries(). The value != null check is the effective guard; the key !== "CarbonIconType" clause can be dropped.

No critical issues. Size conversions are otherwise correct throughout (the boxSize * 4 formula is applied consistently), icon semantic equivalents look right, and the Box as="span" wrapper pattern for layout-bearing icons is used appropriately.

[greptile-apps]

Greptile Summary

This PR completes the Chakra-to-Carbon icon migration across admin-ui, fidesui, and privacy-center by replacing all remaining @chakra-ui/icons usages, removing the deprecated re-export block from fidesui/src/index.ts, and introducing a curated barrel file (fidesui/src/icons/carbon.ts) that limits the exported icon surface from 2,445 to 85 icons. The approach is consistent throughout — Chakra icons with layout props are wrapped in Box as="span" spans to preserve alignment behaviour, while drop-in replacements use Carbon icons directly. Internal fidesui components are also updated to import from the new barrel instead of @carbon/icons-react directly.

• PR size: This PR touches 37 files, which exceeds the 15-file limit established in the team's guidelines. Consider splitting future migrations of this type into smaller batches (e.g., by feature area).
• Close icon size in InfoBox.tsx: The CloseIcon boxSize={5} (20 px) was replaced with Icons.Close size={12} (12 px). This is a ~40% visual size reduction and may not be intentional — verify against design expectations.
• Storybook antd import: carbon.stories.tsx imports from "antd" while all other fidesui source files consistently use "antd/lib".
• The barrel file, index.ts cleanup, and the vast majority of icon swaps are well-executed and safe to merge.

Confidence Score: 4/5

• Safe to merge after verifying the InfoBox close icon size is intentionally 12 px and not a regression from the original 20 px.
• The migration is mechanical, consistent, and well-tested per the PR description. The only non-trivial concern is the InfoBox close icon shrinking from 20 px to 12 px, which could be a subtle visual regression. The PR size rule is violated (37 files vs the 15-file guideline) but that is a process concern rather than a functional one.
• clients/admin-ui/src/features/common/InfoBox.tsx — verify the close button icon size is intentional (12 px vs previous 20 px).

Important Files Changed

Filename	Overview
clients/fidesui/src/icons/carbon.ts	New curated barrel file exporting 85 Carbon icons; replaces the wildcard export * as Icons from "@carbon/icons-react" that exposed 2,445 icons. Clean and well-structured.
clients/fidesui/src/index.ts	Removes the entire deprecated @chakra-ui/icons re-export block (22 aliases + createChakraIcon) and switches Icons to point at the new curated barrel file. Straightforward cleanup.
clients/fidesui/src/icons/carbon.stories.tsx	New filterable Storybook gallery for Carbon icons. Imports from "antd" rather than "antd/lib" which is inconsistent with the rest of the fidesui codebase. The CarbonIconType key filter is unnecessary at runtime since TypeScript types don't appear in Object.entries(), but it is harmless.
clients/admin-ui/src/features/common/InfoBox.tsx	Replaces CloseIcon boxSize={5} (20 px) with Icons.Close size={12} (12 px) — a significant visual size reduction for the close button. The warning icon change from WarningTwoIcon to Icons.WarningAltFilled size={16} is more visually consistent with other usages.
clients/fidesui/src/lib/carbon-icon-defaults.tsx	Updated direct @carbon/icons-react imports to use the new barrel file. Also fixes import ordering (moves Flex and ReactNode imports before the carbon icon imports). Clean change.
clients/fidesui/src/components/chakra-base/checkbox-tree/CheckboxItem.tsx	Replaces ChevronUpIcon/ChevronDownIcon with Icons.ChevronUp/Icons.ChevronDown using inline style to preserve the boxSize="90%" sizing. Correct approach.

_{Reviews (1): Last reviewed commit: "lint fixes" | Re-trigger Greptile}

[kruulik]

This icon renders a little bigger - 16px vs 12px(?)

[gilluminate]

I think I'll let this one slide. This form is likely going to get a major overhaul soon anyway.

[kruulik]

I poked around, visited the views that Claude had pointed out as potentially problematic and couldn't find any obvious visual regressions besides a minor size difference in one button because (some?) Carbon buttons default to 16px . Looks good otherwise, approving!