Menu
Help with correct Modus icon usage patterns including naming conventions, sizing, and accessibility
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
Scaffold form components with proper Modus input integration, event handling, validation, and checkbox bug handling
Scaffold a new Modus wrapper component following established SolidJS patterns with proper TypeScript interfaces, event handling, and cleanup
Debug and fix common event handling problems with Modus web components
Apply the critical checkbox value inversion workaround when working with ModusCheckbox components
Create Modus modals using the callback ref pattern for programmatic control
Help with correct Modus icon usage patterns including naming conventions, sizing, and accessibility
| name | integrate-modus-icons |
| description | Help with correct Modus icon usage patterns including naming conventions, sizing, and accessibility |
Help with correct Modus icon usage patterns including naming conventions, sizing, and accessibility.
Use this skill when:
CRITICAL: Modus icons use UNDERSCORES (_), not hyphens (-)
// ✅ CORRECT: Use underscores
<i className="modus-icons">save_disk</i>
<i className="modus-icons">arrow_left</i>
<i className="modus-icons">add_circle</i>
<i className="modus-icons">user_permissions</i>
// ❌ WRONG: Don't use hyphens
<i className="modus-icons">save-disk</i>
<i className="modus-icons">arrow-left</i>
import ModusIcon from "./components/ModusIcon";
// Informational icon (announced by screen reader)
<ModusIcon
name="user_add"
size="lg"
decorative={false}
ariaLabel="Add user"
/>
// Decorative icon (not announced)
<ModusIcon
name="chevron_right"
size="md"
decorative={true}
/>
Reference: src/components/ModusIcon.tsx
<i> Element// Decorative icon
<i className="modus-icons text-lg" aria-hidden="true">
user_add
</i>
// Informational icon
<i
className="modus-icons text-md"
role="img"
aria-label="Settings"
>
settings
</i>
import ModusButton from "./components/ModusButton";
// Icon with text (left position)
<ModusButton
icon="save_disk"
iconPosition="left"
>
Save File
</ModusButton>
// Icon with text (right position)
<ModusButton
icon="download"
iconPosition="right"
>
Download
</ModusButton>
// Icon only (requires aria-label)
<ModusButton
icon="settings"
iconPosition="only"
ariaLabel="Open settings"
/>
Reference: src/components/ModusButton.tsx:149-206 for icon rendering logic
Use Tailwind text utilities for sizing:
// Small icon
<i className="modus-icons text-sm">info</i>
// Base icon (Modus default 14px)
<i className="modus-icons text-base">warning</i>
// Large icon (16px)
<i className="modus-icons text-lg">error</i>
// Extra large icon (18px)
<i className="modus-icons text-xl">success</i>
| Tailwind Class | Size | Usage |
|---|---|---|
text-2xs | 8px | Micro icons, badges |
text-xs | 10px | Small labels, captions |
text-sm | 12px | Secondary icons |
text-base | 14px | Modus default size |
text-lg | 16px | Body text icons |
text-xl | 18px | Large icons |
text-2xl | 20px | Prominent icons |
text-3xl | 24px | Display icons |
Icons in buttons automatically scale based on button size:
// Icons scale with button size
<ModusButton size="xs" icon="star" iconPosition="left">Extra Small</ModusButton>
<ModusButton size="sm" icon="star" iconPosition="left">Small</ModusButton>
<ModusButton size="md" icon="star" iconPosition="left">Medium</ModusButton>
<ModusButton size="lg" icon="star" iconPosition="left">Large</ModusButton>
// Icon-only buttons use larger icons
<ModusButton size="md" icon="settings" iconPosition="only" ariaLabel="Settings" />
Automatic sizing rules:
text-xs for xs, text-lg for md)text-sm for xs, text-xl for md)Reference: src/components/ModusButton.tsx:98-134
Use design system colors:
// Primary color
<i className="modus-icons text-primary">info</i>
// Success color
<i className="modus-icons text-success">check_circle</i>
// Warning color
<i className="modus-icons text-warning">warning</i>
// Error color
<i className="modus-icons text-error">error</i>
// Muted text
<i className="modus-icons text-muted-foreground">help</i>
For purely decorative icons, use aria-hidden="true":
<button>
<i className="modus-icons mr-2" aria-hidden="true">save_disk</i>
Save Document
</button>
For icons that convey meaning, provide proper labels:
// Using role="img" and aria-label
<i className="modus-icons" role="img" aria-label="Warning">
warning
</i>
// Using aria-label on parent element
<button aria-label="Delete item">
<i className="modus-icons" aria-hidden="true">delete</i>
</button>
Always provide accessible labels:
<ModusButton
icon="settings"
iconPosition="only"
ariaLabel="Open settings menu"
/>
arrow_left, arrow_right, arrow_up, arrow_downchevron_left, chevron_rightmenu, close, home, settings, searchadd, remove, edit_combination, deletesave_disk, download, upload, copy_contentcheck, check_circle, error, warning, alert, info, helpfile, file_upload, file_downloadfolder_open, folder_closed, document, image, videoperson, people_group, user_account, user_addkey, lock, lock_openCheck icon names against the complete list in:
.cursor/rules/modus-icon-names.mdc - Complete list of 700+ valid icon namesCommon mistakes:
Icons should display as glyphs, not text. If you see text like "save_disk" instead of an icon:
index.htmlmodus-icons class is applied// Check if font is loaded
const testElement = document.createElement('span');
testElement.className = 'modus-icons';
document.body.appendChild(testElement);
const fontFamily = window.getComputedStyle(testElement).fontFamily;
console.log('Font loaded:', fontFamily.includes('modus-icons'));
document.body.removeChild(testElement);
src/components/ModusIcon.tsx - Icon component wrappersrc/components/ModusButton.tsx - Button icon integration.cursor/rules/modus-icon-names.mdc - Complete icon name list.cursor/rules/modus-icons-react.mdc - Detailed icon documentation