Cloaked Design SystemPrimitives / Iconography

IconTile

A design-system glyph centered in a circular semantic tone for status, brand, or product-feature identity.

Implementation preview

COMPLETE STORYBOOK REFERENCE

Every example. In one place.

Explore every named example, including states, compositions, and theme variants.

4 stories

Playground selectedOpen canvas

Example source

packages/design-system/src/components/primitives/IconTile/IconTile.stories.tsxExport Playground

Implementation preview Local Storybook build 0.2.0-preview.1. Source specification status does not approve this runtime.

Stories + source JSON ↗

Local specification source status: preview. Implementation preview pending sign-off.

A design-system glyph centered in a circular semantic tone for status, brand, or product-feature identity.

Design-owned component contract ↗Version 0.2.0-preview.1 · Implementation preview pending sign-off

Implementation API 1 entry point · source-derived preview

Read the actual callable API and preserve its composition constraints. Each union branch is a complete alternative; props marked forbidden cannot be supplied.

import { IconTile } from '@cloakedinc/design-system';

IconTileIconTileProps

packages/design-system/src/components/primitives/IconTile/IconTile.tsx:34

Prop	Type	Presence	Notes
`glyph`	"number" \| "info" \| "guard" \| "arrow-left" \| "arrow-right" \| "arrow-up" \| "arrow-down" \| "chevron-down" \| "chevron-up" \| "chevron-left" \| "chevron-right" \| "caret-down" \| "caret-up" \| "trend-up" \| "trend-down" \| "collapse" \| "expand" \| "dropdown-collapse" \| "dropdown-expand" \| "close" \| "clear" \| "menu" \| "copy" \| "search" \| "add" \| "share" \| "phone" \| "sim" \| "account" \| "family" \| "home" \| "wifi" \| "cart" \| "vpn" \| "lock" \| "block" \| "timer" \| "check" \| "send" \| "filter" \| "scan" \| "log" \| "trash" \| "missed" \| "call" \| "voicemail" \| "sms" \| "email" \| "data-removal" \| "dark-web-monitoring" \| "cloaked-pay" \| "cloaked-ai" \| "sms-guard" \| "email-guard" \| "call-guard" \| "card" \| "password" \| "bell" \| "circle-outline" \| "dot" \| "settings" \| "clock" \| "mail" \| "message" \| "user" \| "upload"	Required	Registered glyph name; an unregistered name leaves the circle empty.
`tone`	`"neutral" \| "info" \| "success" \| "warning" \| "danger" \| "brand" \| "monitoring" \| "guard" \| "identity" \| undefined`	Optional	Semantic tone driving the circle background + glyph color.Source default: `'neutral'`
`size`	`IconTileSize \| undefined`	Optional	Named size tier; sets both the circle and the glyph.Source default: `'md'`
`label`	`string \| undefined`	Optional	Accessible label for meaningful tiles.
`className`	`string \| undefined`	Optional
`testId`	`string \| undefined`	Optional	Selector on the tile `<span>`; the glyph inside carries none.

Only explicit destructured parameter initializers are extracted. Other runtime defaults remain in implementation source.

Complete contract · JSON ↗Guidance and source · Markdown ↗

Overview

A glyph inside a semantic tone circle — the single way to show "an icon in a colored circle." tone carries the meaning. Reach for Avatar instead when the mark represents a person or account identity.

Use when

tone spans three axes; pick the one whose meaning matches the category the icon stands for.

size sets both the circle and the glyph (sm 32 · md 40 · lg 48). Omit label for decorative tiles — the tile is then aria-hidden.

Tones

Every tone across all three axes.

Usage by variant

Choice	Use when	Avoid when
`Tone: neutral`	A non-semantic mark on the bold surface — the default when no status or category applies.	Anything with an outcome or feature meaning — use a status or feature tone.
`Tone: info · success · warning · danger`	Outcome markers — a verified check (`success`), a risk (`danger`), a caution (`warning`), a note (`info`).	Feature branding — those map to the feature tones below.
`Tone: brand`	The Cloaked accent, for a primary brand affordance. At most one prominent brand mark per screen.	Routine list icons, which would dilute the accent — use neutral or a feature tone.
`Tone: monitoring · guard · identity`	Product-feature identity — the only tones used directly in app code today (FeedCTACard category tiles).	A generic mark with no feature association — use `neutral`.

Component specification

$schema

../../../specs/component-spec.schema.json

Parts

Id: tile
Label: Tile
Description: Owns circular geometry and the selected semantic tone.

Id: icon
Label: Icon
Description: Centers one design-system glyph at the size paired with the tile.

Allowed Design Choices

Variants

Neutral

Label: Neutral

Info

Label: Information

Success

Label: Success

Warning

Label: Warning

Danger

Label: Danger

Brand

Label: Brand

Monitoring

Label: Monitoring

Guard

Label: Guard

Identity

Label: Identity

Sizes

Label: Small

Label: Medium

Label: Large

Tones

Neutral

Label: Neutral
Description: General-purpose bold tile without status or product-area meaning.

Info

Label: Information
Description: Communicates an informational outcome.

Success

Label: Success
Description: Communicates a successful outcome.

Warning

Label: Warning
Description: Communicates an outcome that needs attention.

Danger

Label: Danger
Description: Communicates an error or destructive outcome.

Brand

Label: Brand
Description: Uses the Cloaked accent without assigning a status.

Monitoring

Label: Monitoring
Description: Identifies the monitoring product area.

Guard

Label: Guard
Description: Identifies the guard product area.

Identity

Label: Identity
Description: Identifies the identity product area.

Variants

Id: neutral
Label: Neutral
Description: General-purpose bold tile without status or product-area meaning.
Platforms: ios
android
web

Id: info
Label: Information
Description: Communicates an informational outcome.
Platforms: ios
android
web

Id: success
Label: Success
Description: Communicates a successful outcome.
Platforms: ios
android
web

Id: warning
Label: Warning
Description: Communicates an outcome that needs attention.
Platforms: ios
android
web

Id: danger
Label: Danger
Description: Communicates an error or destructive outcome.
Platforms: ios
android
web

Id: brand
Label: Brand
Description: Uses the Cloaked accent without assigning a status.
Platforms: ios
android
web

Id: monitoring
Label: Monitoring
Description: Identifies the monitoring product area.
Platforms: ios
android
web

Id: guard
Label: Guard
Description: Identifies the guard product area.
Platforms: ios
android
web

Id: identity
Label: Identity
Description: Identifies the identity product area.
Platforms: ios
android
web

Sizes

Id: sm
Label: Small
Description: 32-unit tile with a 16-unit glyph.

Id: md
Label: Medium
Description: 40-unit tile with a 20-unit glyph.

Id: lg
Label: Large
Description: 48-unit tile with a 24-unit glyph.

Measurements

Id: small-tile-size
Label: Small tile size
Kind: exact
Token: --cds-size-32
Value: 32
Unit: px
Applies To: tile
sm

Id: medium-tile-size
Label: Medium tile size
Kind: exact
Token: --cds-size-40
Value: 40
Unit: px
Applies To: tile
md

Id: large-tile-size
Label: Large tile size
Kind: exact
Token: --cds-size-48
Value: 48
Unit: px
Applies To: tile
lg

Layout

Alignment: The glyph is centered in a circular tile.
Flow: The tile is an inline, non-shrinking visual.
Notes: Use Avatar instead when the circle represents a person, account, or brand identity.

Typography And Color

Typography

Label: Adjacent label
Description: Compact labels composed beside or below a tile use the body-small ramp.
Token: --cds-type-body-small-size

Colors

Label: Neutral fill
Description: Uses the theme-aware bold surface.
Token: --cds-bg-bold

Label: Brand fill
Description: Uses the Cloaked brand accent.
Token: --cds-brand

Label: Information fill
Description: Uses the solid information status role.
Token: --cds-status-info-solid

Label: Success fill
Description: Uses the solid success status role.
Token: --cds-status-success-solid

Label: Warning fill
Description: Uses the solid warning status role.
Token: --cds-status-warning-solid

Label: Danger fill
Description: Uses the solid danger status role.
Token: --cds-status-danger-solid

Label: Monitoring fill
Description: Uses the monitoring product-area accent.
Token: --cds-feature-monitoring

Label: Guard fill
Description: Uses the guard product-area accent.
Token: --cds-feature-guard

Label: Identity fill
Description: Uses the identity product-area accent.
Token: --cds-feature-identity

Label: Tone foreground
Description: Uses an inverse foreground on saturated tone fills.
Token: --cds-text-inverse

States

Id: decorative
Label: Decorative
Description: Has no label and is hidden from assistive technology.

Id: meaningful
Label: Meaningful
Description: Exposes image role and a label describing the icon and tone meaning.

Behavior

Label: Tone axes
Description: Choose from status outcomes, brand, or one product-feature identity; do not use feature tones as status.

Label: Paired scale
Description: Change tile and glyph dimensions together through the named size.

Accessibility

Label: Meaningful tiles
Description: Provide a label when the tile conveys information not repeated by adjacent copy.

Label: Decorative tiles
Description: Omit the label when visible text already communicates the same meaning.

Content Adaptation

Label: Icon choice
Description: Pair each semantic tone with a glyph whose established meaning supports it.

Motion Haptics

Motion

Label: No intrinsic motion
Description: IconTile has no animated state.

Haptics

Label: No feedback
Description: IconTile is not interactive and does not request haptic feedback.

Platform Differences

None specified

Implementation preview

This design-owned implementation is ready to try and review. It does not establish product approval. Imported specifications retain their original review status.

Inspect version 0.2.0-preview.1