DS
Published-package documentation wired to the real DS runtime so the same routes reveal how tenant and engine reshape identical component contracts.
Rottay / modernPublished package
Premium Docs

Design System Showroom

Primary
#FFFFFF
Rottay
Radius
14px
Surface shape
DensitynormalPlatform Flagship
NavigatorLibrary map
8 sections212 routes
Foundations first, then primitives, patterns, structures, and surfaces. Keep this rail legible enough to scan without hunting.
FoundationsCurrent section
4
Tokens
Themes
93
49
24
36
3
1
2
Runtime fingerprintToken readout from the active provider chain.
Live DS
Runtime
PlatformRottay
Rottay / ModernPlatform Flagship
Primary
#FFFFFFSecondary #A0A0A5
Radius
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
#FFFFFFRottay
Chrome
Modernrenderer posture
Radius
14pxsurface shape
Density
normalPlatform Flagship
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.
Semantic sets
Engines
Icons
109
Primitives93 documented routes
Display
Inputs
Feedback
Layout
Navigation
Overlay
Patterns49 documented routes
Data
Forms
Visualization
Communication
Feedback
Workflow
Navigation
Commerce
Customization
Identity
Shell
Structures24 documented routes
Headers
Workspace
Shell
Record
Dashboard
Feedback
Surfaces36 documented routes
Admin
Data
Experience
Forms
Operations
Workspace
Verticals3 documented routes
Platform
Bit Hire
Evnto
Playground1 documented routes
Playground
Developers2 documented routes
Developers
14pxxl 18px
Density
normalBorder-light cards
Accent
Badge
roundedtop bar · solid dividers
Icons

Icons

Active profilePlatform Flagship
Runtime postureRottay / modern
Shared icon vocabulary for navigation, actions, status, and data display.
Runtime controls
TenantRottay
EngineModern

Icon language at a glance

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

Navigation

15
ArrowDownarrow-down
ArrowLeftarrow-left
ArrowRightarrow-right
ArrowUparrow-up
ArrowUpRightarrow-up-right
ChevronDownchevron-down
ChevronLeftchevron-left
ChevronRightchevron-right
ChevronUpchevron-up
ExternalLinkexternal-link
Homehome
Menumenu
MoreHorizontalmore-horizontal
PanelRightClosepanel-right-close
ScanSearchscan-search

Action

15
ClipboardCopyclipboard-copy
Copycopy
Downloaddownload
Editedit
Pencilpencil
PencilLinepencil-line
Plusplus
Powerpower
RefreshCwrefresh
RotateCcwrotate
Savesave
Sendsend
Share2share
Trash2trash
Uploadupload

Status

12
AlertCirclealert-circle
AlertOctagonalert-octagon
AlertTrianglealert-triangle
Banban
CheckCircle2check-circle-2
CheckCirclecheck-circle
Checkcheck
CircleAlertcircle-alert
Infoinfo
LoaderCircleloader-circle
XCirclex-circle
Xx

Content

7
Bookmarkbookmark
BookmarkPlusbookmark-plus
Bracesbraces
FileDownfile-down
FileTextfile-text
Folderfolder
Imageimage

Communication

6
Bellbell
Inboxinbox
Mailmail
MessageSquaremessage-square
Phonephone
SendMessagesend-message

User

14
Fingerprintfingerprint
Keykey
KeyRoundkey-round
Locklock
LogOutlog-out
Settings2settings-2
Settingssettings
ShieldCheckshield-check
Shieldshield
UserCheckuser-check
Useruser
UserMinususer-minus
Usersusers
UserXuser-x

Data

10
Activityactivity
BarChart3bar-chart
Databasedatabase
Filterfilter
Globeglobe
Layerslayers
Searchsearch
SlidersHorizontalsliders
TrendingDowntrending-down
TrendingUptrending-up

Layout

10
AlignCenteralign-center
AlignJustifyalign-justify
AlignLeftalign-left
CalendarDayscalendar-days
Calendarcalendar
Columns3columns-3
Grid3x3grid-3x3
LayoutGridlayout-grid
LayoutTemplatelayout-template
Listlist

Media

9
AudioLinesaudio-lines
Cameracamera
Eyeeye
EyeOffeye-off
Micmic
MicOffmic-off
Sparklessparkles
Starstar
Zapzap

Misc

11
Briefcasebriefcase
Building2building
Clockclock
Flagflag
GitComparegit-compare
GripVerticalgrip-vertical
Keyboardkeyboard
Loader2loader
Pinpin
PinOffpin-off
Rocketrocket

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
import { SearchIcon, PlusIcon, CheckIcon } from '@rottay/design-system/icons';

<Button variant="primary">
  <PlusIcon size={16} />
  Add record
</Button>
Icon importTSX
Quick copy