Skip to content

feat(icons): add 7 IO icons and connect them in Figma - #3976

Open
tigernaut wants to merge 2 commits into
figma-code-connect-button-iconsfrom
figma-io-icons-missing
Open

tigernaut wants to merge 2 commits into
figma-code-connect-button-iconsfrom
figma-io-icons-missing

Conversation

@tigernaut

@tigernaut tigernaut commented Oct 1, 2026 •

Copy link
Copy Markdown

Description & motivation 💭

Adds 7 IO Design System icons that had no equivalent in code, and connects each one to Figma with a Code Connect template. This builds on #3974, which this PR targets as its base.

IO Figma icon Code export
Icon/arrow/caret-up IconCaretUp
Icon/arrow/caret-down IconCaretDown
Icon/UI/filter-lines-dot IconFilterLinesDot
Icon/UI/slash-forward IconSlashForward
Icon/Temporal/Nexus-Registry-and-Endpoints IconNexusRegistry
Icon/logo/mcp IconMcp
Icon/logo/gemini IconGemini
  • SVGs: exported from Figma and optimised with svgo@3, using the config in src/lib/io/icon/README.md.
  • Color: currentColor everywhere except the filter-lines-dot indicator. That dot keeps a fixed #3E63DD, because it's a visual cue that a filter is active rather than part of the glyph.
  • Exports: added to src/lib/io/icon/index.ts in alphabetical order.
  • Templates: a .figma.ts template next to each icon, following the pattern from feat(figma): add Code Connect templates for Button and IO icons #3974.

The IO Icon/arrow/up and Icon/arrow/down block arrows are intentionally left out for now.

Screenshots (if applicable) 📸

Each new code icon was rendered next to its Figma original at 16px and 64px; the shapes match.

Design Considerations 🎨

None.

Testing 🧪

How was this tested 👻

  • Manual testing

  • E2E tests added

  • Unit tests added

  • Compared each icon with the Figma original by rendering both at 16px and 64px.

  • pnpm check and pnpm lint report 0 errors.

  • npx figma connect parse: all templates parse.

Steps for others to test: 🚶🏽‍♂️🚶🏽‍♀️

  1. Run Storybook and open Io/Icon → Contact Sheet. The 7 new icons should appear.
  2. After merging, run npx figma connect publish with FIGMA_ACCESS_TOKEN set. Then check that each icon in Dev Mode shows its $lib/io/icon import.

Checklists

Draft Checklist

Merge Checklist

Issue(s) closed

Docs

Any docs updates needed?

No.

🤖 Generated with Claude Code

Add IconCaretUp, IconCaretDown, IconFilterLinesDot, IconSlashForward,
IconNexusRegistry, IconMcp and IconGemini from the IO Design System,
optimised with svgo per the icon README, plus Code Connect templates.
The filter-lines-dot indicator keeps its fixed #3E63DD fill.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@tigernaut
tigernaut requested a review from a team as a code owner October 1, 2026 15:13
@vercel

vercel Bot commented Oct 1, 2026 •

Copy link
Copy Markdown

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

Project Deployment Actions Updated
holocene Ready Ready Preview Oct 1, 2026 3:35pm UTC

Request Review

@CLAassistant

Copy link
Copy Markdown

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.


Ash Ramos seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
You have signed the CLA already but the status is still pending? Let us recheck it.

This branch was successfully deployed

1 active deployment
Preview — a6f6bff6 Deployed Oct 1, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants