Icon Library Panel
The Icon Library panel lets you place GCP, AWS, Twemoji, and React Icons on the canvas. Click the emoji icon button on the right side of the toolbar to show it.
Supported Providers
| Provider | Description |
|---|---|
| GCP | Google Cloud Platform architecture icons |
| AWS | Amazon Web Services architecture icons |
| Twemoji | Twitter emoji icons (~1,630 icons, CC BY 4.0) |
| React Icons | 30+ sets, ~40,000 icons (fetched via API on set selection) |
Twemoji Categories
| Category | Contents |
|---|---|
| Smileys & Emotion | Happy, sad, and expressive faces |
| People & Body | People, gestures, and occupations |
| Animals & Nature | Animals, plants, and weather |
| Food & Drink | Meals, fruits, and beverages |
| Travel & Places | Vehicles, buildings, and landscapes |
| Activities | Sports, games, and arts |
| Objects | Electronics, clothing, and stationery |
| Symbols | Arrows, shapes, and hearts |
| Flags | National and regional flags |
Searching and Filtering Icons
- Provider selector: Switch between GCP, AWS, Twemoji, and React Icons at the top of the panel
- Provider persistence: The selected provider is saved in project data and restored when you reopen the document
- Category filter: Select a category to narrow the icon list
- Text search: Enter a name or keyword in the search box
- Count display: Shows filtered / total count
- React Icons: Select a set to fetch icons via API (search is debounced 300ms and processed server-side)
- Performance safeguards: Cross-set search is enabled from 2 characters and returns up to 500 results. Per-set listing shows up to 1,200 icons.
Placing Icons
Drag and drop an icon onto the canvas to place it as a builtin node. Only React Icons are created with a default icon color (Color); GCP/AWS/Twemoji are added without a color value.