Azyrom includes 145 professional vector icons from Material Icons (71) and Font Awesome (74) icon libraries. Insert icons via the Icon Picker dialog with instant search.
Accessing Icons
Method 1: Insert Icon Button
- Click the 🎨 Insert Icon button in the toolbar
- Icon Picker dialog opens with searchable 145-icon grid
- Search by keyword (e.g., "heart", "settings", "home")
- Click any icon to insert at canvas center (400, 300)
- Icon appears selected for immediate customization
Method 2: Component Library
- Open Components panel (right sidebar)
- Click 📦 Mobile UI button
- Browse Icons / Basic category (18 preset icons)
- Drag icon onto canvas or click to place
Icon Categories (145 icons)
- Navigation (12) - home, menu, search, close, arrow_back, arrow_forward, expand, etc.
- Actions (18) - check, close, add, remove, edit, delete, save, cancel, undo, redo, etc.
- Communication (14) - email, phone, chat, message, notifications, etc.
- Content (16) - add_circle, remove_circle, copy, paste, filter, sort, etc.
- Social (12) - favorite, share, person, group, star, thumb_up, etc.
- UI (22) - settings, visibility, lock, unlock, info, warning, error, etc.
- Media (15) - play, pause, stop, volume, mic, camera, photo, video, etc.
- Location (8) - location_on, map, place, directions, navigation, etc.
- Shopping (10) - shopping_cart, store, payment, receipt, local_offer, etc.
- Misc (18) - calendar, time, cloud, download, upload, language, print, etc.
Icon Search
The Icon Picker includes intelligent keyword search:
- Search by name: "home" finds home icon
- Search by category: "settings" finds all settings-related icons
- Search by synonym: "trash" finds delete icon
- Search by action: "close" finds close, cancel icons
- Results update instantly as you type
Customizing Icons
Size
- Default: 24×24px (Material Design standard)
- Small: 18px (compact UI)
- Large: 48px (prominent icons)
- Custom: Resize via handles or Properties Panel (X/Y)
- Tip: Use sizes divisible by 6 (18, 24, 30, 36, 42, 48) for crisp rendering
Color
- Default: Black (#000000)
- Fill Color: Change via Properties Panel → Fill section
- Stroke Color: Adjust via Properties Panel → Stroke section
- Accessibility: Maintain 4.5:1 contrast ratio with background (WCAG AA)
Stroke Width
- Default: 2px stroke width
- Range: 0-10px adjustable
- Filled Icons: Set stroke to 0 for solid fill
- Outlined Icons: Use 1.5-2.5px for outlines
Icon Properties
- Format: SVG-based vector icons (lossless scaling)
- Libraries: Material Icons + Font Awesome
- Style: Professional, industry-standard designs
- Consistency: Unified visual language across all 145 icons
- Performance: Lightweight vector format, instant rendering
Common Use Cases
- Navigation - Home, menu, back buttons
- Actions - Add, edit, delete, save, cancel
- Indicators - Success (✓), error (⚠), info (i)
- Social - Like (♥), share, profile icons
- Media Controls - Play, pause, volume
- Settings - Gear icon for settings/preferences
- Communication - Email, phone, message icons
Best Practices
- Use 24×24px for standard UI icons (Material guideline)
- Use 18px for compact toolbars and dense interfaces
- Use 48px for prominent feature icons
- Maintain consistent sizing within the same interface
- Ensure 4.5:1 contrast ratio for accessibility (WCAG AA)
- Use familiar icons for common actions (home, search, settings)
- Avoid using too many different icons in one screen
- Test icon clarity at intended display size
Keyboard Workflow
- Press Cmd+K (Mac) or Ctrl+K (Windows) to open Icon Picker
- Type search keyword (e.g., "heart")
- Use Arrow keys to navigate icons
- Press Enter to insert selected icon
- Icon appears at canvas center, selected and ready to customize