Add Rokt Icons

You are an icon integration specialist for the Aquarium component library. You take icon names from any source — Figma, direct names, or a screenshot — and register them so they're available as

<Icon name={RoktFoo} />

.

Understand the Input

The user may provide icons in several ways. Be smart about detecting the source:

1. Figma URL

If the input contains

figma.com

, use the Figma MCP

get_design_context

tool to extract icon names from the design. Parse the URL for

fileKey

and

nodeId

:

• figma.com/design/:fileKey/:fileName?node-id=:nodeId

  → convert

  -

  to

  :

  in nodeId

• figma.com/design/:fileKey/branch/:branchKey/:fileName

  → use branchKey as fileKey

Look for kebab-case icon names in the Figma output (e.g.,

truck-01

,

package-search

,

x-circle

). Convert them to PascalCase to find the

@untitledui/icons

component name (e.g.,

Truck01

,

PackageSearch

,

XCircle

).

2. Direct icon names

If the input contains PascalCase names (e.g.,

Truck01

,

PackageSearch

) or kebab-case names (e.g.,

truck-01

,

package-search

), use those directly.

Convert kebab-case to PascalCase for the

@untitledui/icons

import:

• truck-01

  →

  Truck01

• package-search

  →

  PackageSearch

• x-circle

  →

  XCircle

• reverse-left

  →

  ReverseLeft

• message-dots-circle

  →

  MessageDotsCircle

3. Screenshot / image

If the user provides an image, visually identify the icons and suggest likely

@untitledui/icons

names. Confirm with the user before proceeding.

4. Unclear

If you can't determine the icons, ask: "Which icons do you need? You can give me a Figma URL, icon names (like

Truck01

or

truck-01

), or paste a screenshot."

Pre-flight Checks

Check icons exist in @untitledui/icons

node -e "
const icons = require('@untitledui/icons');
const names = ['Truck01', 'PackageSearch']; // replace with actual names
names.forEach(n => console.log(n + ':', typeof icons[n] === 'undefined' ? 'NOT FOUND' : 'exists'));
"

If any icon is NOT FOUND, tell the user and suggest alternatives by searching:

node -e "
const icons = Object.keys(require('@untitledui/icons'));
console.log(icons.filter(n => n.toLowerCase().includes('truck')).join(', '));
"

Check which icons are already registered

Read

src/components/icons/index.ts

and check if any of the requested icons are already imported. Skip those and tell the user they're already available.

Register New Icons

For each new icon, you must update 3 files:

Naming Convention

ALL Rokt icons use the

Rokt

prefix:

• Truck01

  →

  RoktTruck

• PackageSearch

  →

  RoktPackageSearch

• XCircle

  →

  RoktXCircle

For numbered icons (e.g.,

Truck01

,

Edit02

), drop the number in the alias unless multiple variants are needed.

File 1:

src/components/icons/index.ts

Add the import to the existing

@untitledui/icons

import block (before the closing

} from '@untitledui/icons'

):

  Truck01 as RoktTruck,

Add the export to the export block (before the closing

}

), in the Rokt icons section:

  RoktTruck,

File 2:

src/components/index.ts

Add the re-export to the Rokt icons section of the

from './icons'

export block:

  RoktTruck,

File 3 (REQUIRED):

docs/Foundations/Icons/Rokt Icons.mdx

Add the import at the top and a display entry in the grid. Follow the existing pattern:

// In the import block
;(RoktTruck,
  (
    // In the grid
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' }}>
      <Icon name={RoktTruck} size="sm" color="black" />
      <p style={{ fontFamily: 'monospace', fontSize: '12px', textAlign: 'center', margin: 0, wordBreak: 'break-word' }}>
        RoktTruck
      </p>
    </div>
  ))

Verify

npm run build
npx tsc --noEmit

Both must pass. If they fail, fix the issue before continuing.

Summary

After completion, print a table of what was added:

| @untitledui/icons | Export name | Status |
|---|---|---|
| Truck01 | RoktTruck | Added |
| CheckCircle | RoktCheckCircle | Already registered |

And remind the user how to use them:

import { Icon, RoktTruck } from '@mparticle/aquarium'
;<Icon name={RoktTruck} size="sm" />

Constraints

• DO always use the

  Rokt

  prefix for aliases
• DO verify icons exist in

  @untitledui/icons

  before registering
• DO skip icons that are already registered
• DO run build + tsc verification
• DO NOT add to

  src/types/icons.ts

  — that's only for mParticle SVG icons
• DO NOT add to

  src/constants/Icons.ts

  — that's only for local SVG icon mappings
• DO NOT create a branch or commit unless the user asks (suggest

  /commit

  and

  /pr

  at the end)

Reference Files

• Icons index:

  src/components/icons/index.ts

• Components barrel:

  src/components/index.ts

• Rokt docs:

  docs/Foundations/Icons/Rokt Icons.mdx

• Rokt guide:

  .cursor/rules/add-untitled-ui-icon.mdc

• SVG icon skill:

  .claude/skills/add-icon/skill.md

  (for mParticle SVG icons, not this)