Icon Library Panel
The Icon Library panel lets you place GCP, Google, AWS, Cloudflare, Sakura Cloud, 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 |
| Official Google service/product icons (75 icons, Wikimedia Commons SVG-first with official PNG fallback) | |
| AWS | Amazon Web Services architecture icons |
| Cloudflare | Cloudflare developer stack icons (30 icons, sourced from official docs repo) |
| Sakura Cloud | Sakura Cloud service icons |
| Twemoji | Twitter emoji icons (~1,630 icons, CC BY 4.0) |
| React Icons | 30+ sets, ~50,000 icons (managed in provider-specific search indexes) |
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
- Cross-library search: The search box always searches across GCP/Google/AWS/Cloudflare/Sakura Cloud/Twemoji/React Icons
- Initial provider: Twemoji is selected by default in new documents (saved documents restore the previous selection)
- Provider filter: You can narrow results to a single provider (or keep All providers)
- Category filter: You can narrow by category/source set under the current provider condition
- While searching: Provider and Category dropdowns are disabled when the search box has at least one character
- Initial category: Twemoji starts from Objects, React Icons starts from the default set (ci), and other providers start with All
- Text search: Partial-match search is applied to icon name, category, ID, and tags
- Search processing: Input is debounced by 300ms and processed entirely on the client side, loading only the provider search indexes that are needed
- Count display: Shows both visible items and total matches across all libraries
- Column count: Widening the panel automatically increases the number of icon grid columns
- Result cap: Visible results are capped to keep rendering responsive
Sakura Cloud Usage Guidelines
- Permitted use: service introduction content and architecture diagrams that represent Sakura Cloud services
- Prohibited use: use outside Sakura Cloud-related contexts, icon modifications, and redistributing the icon files themselves
- Notes: use the latest icon set, add service names where helpful, and avoid overlapping icons or resizing that breaks aspect ratio
See the official guideline page for details: Sakura Cloud Service Icon Set
Placing Icons
Dragging and dropping SVG icons onto the canvas places them as builtin nodes. The Google provider also includes icons officially distributed only as PNG, and PNG icons are placed as image nodes. Drop size follows the document-level shared icon size (default 100x100). Only React Icons are created with a default icon color (Color); GCP/Google/AWS/Cloudflare/Sakura Cloud/Twemoji are added without a color value. Builtin nodes reference icons by a logical library ID instead of a public file path, so they are not affected by case differences in icon file names. Builtin nodes can show labels, and label visibility/font/size/text style (bold/italic/strikethrough)/color plus label text outline and text shadow are configured as shared settings in the Properties panel (labels are ON by default).
See the License page for license terms and trademark policy links.