DS
Premium Docs

Design System Showroom

Published-package documentation wired to the real DS runtime so the same routes reveal how tenant and engine reshape identical component contracts.
Rottay / modern
Published package
Primary
#0A0A0A
Rottay
Radius
14px
Surface shape
DensitynormalPlatform Flagship
NavigatorLibrary map
8 sections
212 routes
Foundations first, then primitives, patterns, structures, and surfaces. Keep this rail legible enough to scan without hunting.
FoundationsCurrent section
4
Tokens
Themes
Engines
Icons
109
97
Display
Inputs
Feedback
Layout
Navigation
Overlay
48
Data
Forms
Visualization
Communication
Workflow
Navigation
Misc
21
Headers
Workspace
Record
Dashboard
Feedback
36
Admin
Data
Experience
Forms
Operations
Workspace
3
Platform
Bit Hire
Evnto
1
Playground
2
Developers
Runtime fingerprintToken readout from the active provider chain.
Live DS
Runtime
Platform
Rottay
Rottay / ModernPlatform Flagship
Primary
#0A0A0ASecondary #6B6B6B
Radius
14pxxl 18px
Density
normalBorder-light cards
Accent
Badge
Compact runtime evidence across 3+ token signals.
Published DS package · System Layer · Rottay / modernShared route metadata for the active runtime, kept inline so the shell reads like a thin header band.
Palette
#0A0A0ARottay
Chrome
Modernrenderer posture
Radius
14pxsurface shape
Density
normalPlatform Flagship
Icons

Icons

Active profilePlatform Flagship
Runtime postureRottay / modern
Shared icon vocabulary for navigation, actions, status, and data display.
Runtime controls
Foundations
/
Icon library
Quick jumps
Navigation
Action
Status
Data
Layout
Runtime editorial reference

Icons

Icons are a semantic vocabulary layer for navigation, action, data, status, content, and system chrome. Search by task and copy imports directly from the catalog.
Featured read
Use this page for
Finding the right icon by intent, not inventing custom SVG drift in product surfaces.
Icons
109
Curated DS icon exports
Categories
10
Organized by UI intent
Copy flow
1 click
Import statement to clipboard
Sizing
currentColor
Portable across surfaces
Interaction
Click any icon cell to copy the import statement from @rottay/design-system/icons.
Rendering contract
All icons are wrapped for consistent sizing and currentColor behavior across themes and engines.
Primitives97 documented routes
Patterns48 documented routes
Structures21 documented routes
Surfaces36 documented routes
Verticals3 documented routes
Playground1 documented routes
Developers2 documented routes
roundedtop bar · solid dividers
TenantRottay
EngineModern

Icon language at a glance

A compact editorial sample before you dive into the full catalog.
Semantic sets
NavigationWayfinding, switchers, and shell chrome.
ActionPrimary verbs and direct manipulation.
StatusSuccess, warnings, and operational states.
Showing 109 of 109 matching icons

Navigation

15

Action

15

Status

12

Content

7

Communication

6

User

14

Data

10

Layout

10

Media

9

Misc

11

Usage guidance

Prefer task meaning over decorative novelty.
Match icon weight to nearby typography and button density.
Use icons to reinforce labels, not replace them in dense products.
Import from @rottay/design-system/icons only.

Sizing

16px
20px
24px
32px
Icon importPublished package entrypoint, ready to copy.
tsx
6 lines
Consumption
Runtime-aware snippet
Icon importTSX
Quick copy
import { SearchIcon, PlusIcon, CheckIcon } from '@rottay/design-system/icons';

<Button variant="primary">
  <PlusIcon size={16} />
  Add record
</Button>
ChevronDownchevron-down
ChevronLeftchevron-left
ChevronRightchevron-right
ChevronUpchevron-up
ExternalLinkexternal-link
Homehome
Menumenu
MoreHorizontalmore-horizontal
PanelRightClosepanel-right-close
ScanSearchscan-search
PencilLinepencil-line
Plusplus
Powerpower
RefreshCwrefresh
RotateCcwrotate
Savesave
Sendsend
Share2share
Trash2trash
Uploadupload
CheckCirclecheck-circle
Checkcheck
CircleAlertcircle-alert
Infoinfo
LoaderCircleloader-circle
XCirclex-circle
Xx
Folderfolder
Imageimage
SendMessagesend-message
Settings2settings-2
Settingssettings
ShieldCheckshield-check
Shieldshield
UserCheckuser-check
Useruser
UserMinususer-minus
Usersusers
UserXuser-x
Layerslayers
Searchsearch
SlidersHorizontalsliders
TrendingDowntrending-down
TrendingUptrending-up
Columns3columns-3
Grid3x3grid-3x3
LayoutGridlayout-grid
LayoutTemplatelayout-template
Listlist
MicOffmic-off
Sparklessparkles
Starstar
Zapzap
Keyboardkeyboard
Loader2loader
Pinpin
PinOffpin-off
Rocketrocket