Assets & SVG Icons - Complete Guide
Assets & SVG Icons - Complete Guide
Learn how to browse, search, and add SVG icons and vector assets to your animations in Scribe Animator. This guide covers the Asset Library with 7,000+ curated SVG icons, custom asset uploads, and the Vector Import panel for external SVGs.
Application Layout Overview
┌─────────────────────────────────────────────────────────────────────────────┐
│ HEADER BAR │
│ [File] [Edit] [View] [Export] [Share] [?] │
├────────────┬───────────────────────────────────────────────────────────────┬┤
│ │ │ │
│ LEFT │ │ RIGHT │
│ SIDEBAR │ CANVAS AREA │ SIDEBAR │
│ │ │ │
│ ┌────────┐ │ ┌─────────────────────────────┐ │ ┌────────────┐ │
│ │ 📚 │◄├─────┤ │ │ │ INSPECTOR │ │
│ │ Assets │ │ │ Your Animation │ │ │ PANEL │ │
│ ├────────┤ │ │ Canvas │ │ ├────────────┤ │
│ │ 🖼️ │ │ │ │ │ │ Properties │ │
│ │ Images │ │ │ [SVG icons appear here │ │ │ Position │ │
│ ├────────┤ │ │ after adding from │ │ │ Animation │ │
│ │ 📝 │ │ │ the Asset Library] │ │ │ Layer │ │
│ │ Text │ │ │ │ │ │ │ │
│ ├────────┤ │ └─────────────────────────────┘ │ └────────────┘ │
│ │ 🧩 │◄├─── Vector Import (external SVGs) │ │
│ │ Vectors│ │ │ │
│ └────────┘ │ │ │
│ │ │ │
├────────────┴───────────────────────────────────────────────┴────────────────┤
│ TIMELINE │
│ [▶️ Play] ════════════════════════════════════════════════ [00:00 / 00:30] │
└─────────────────────────────────────────────────────────────────────────────┘
Asset Feature Access Points:
- Left Sidebar → 📚 Assets — Browse the built-in SVG Icon Library
- Left Sidebar → 🧩 Vectors — Import your own SVG files
- Left Sidebar → 🖼️ Images — Access uploaded custom assets
Quick Start: Adding SVG Icons
Method 1: Asset Library (Recommended)
Step 1 Step 2 Step 3
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Click 📚 │ │ Search or │ │ Click icon │
│ Assets icon │ ───► │ browse icons │ ───► │ to add it │
│ in sidebar │ │ by category │ │ to canvas │
└──────────────┘ └──────────────┘ └──────────────┘
Method 2: Vector Import (External SVGs)
Step 1 Step 2 Step 3
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Click 🧩 │ │ Drop or │ │ Configure │
│ Vectors icon │ ───► │ browse for │ ───► │ draw settings│
│ in sidebar │ │ your SVG │ │ then add │
└──────────────┘ └──────────────┘ └──────────────┘
tip
The Asset Library contains 7,000+ pre-processed, optimized SVG icons ready for animation. Use this for quick access to common icons without any setup!
Asset Library Overview
The Asset Library provides instant access to a curated collection of SVG icons.
Library Statistics
| Metric | Value |
|---|---|
| Total Icons | 7,300+ |
| Format | SVG (Vector) |
| Categories | 50+ |
| Searchable | ✅ Yes |
| Pre-optimized | ✅ Yes |
Asset Library Panel
┌─────────────────────────────────────────────────────────────┐
│ 📚 Asset Library [×] │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 🔎 Search icons... │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ Category: [📁 All Categories ▼] │
│ │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │ 🏠 │ │ ⚙️ │ │ 👤 │ │ 📧 │ │ 📱 │ │ 💻 │ │
│ │home │ │gear │ │user │ │mail │ │phone│ │laptop│ │
│ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘ │
│ │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │ 🔔 │ │ ❤️ │ │ ⭐ │ │ 🔒 │ │ 🔍 │ │ 📊 │ │
│ │bell │ │heart│ │star │ │lock │ │search│ │chart│ │
│ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘ │
│ │
│ ... (virtualized grid - scrolls to show more) ... │
│ │
├─────────────────────────────────────────────────────────────┤
│ Showing 7,307 icons • Click any icon to add to canvas │
└─────────────────────────────────────────────────────────────┘
Icon Categories
Browse icons by category for quick discovery.
Available Categories
| Category | Icons | Description |
|---|---|---|
| All | 7,300+ | Full icon collection |
| Arrows | 200+ | Directional arrows and navigation |
| Business | 300+ | Office, charts, documents |
| Communication | 250+ | Email, chat, phone, messaging |
| Devices | 200+ | Computer, mobile, hardware |
| Education | 150+ | School, learning, books |
| Files | 180+ | Documents, folders, media |
| Health | 120+ | Medical, fitness, wellness |
| Media | 200+ | Play, pause, audio, video |
| Navigation | 150+ | Maps, location, directions |
| Shopping | 180+ | Cart, payment, e-commerce |
| Social | 250+ | Social media, sharing |
| Technology | 300+ | Code, server, database |
| Travel | 150+ | Transportation, places |
| Weather | 100+ | Sun, cloud, rain, snow |
| UI Elements | 400+ | Buttons, checkboxes, menus |
Category Selection
Category Dropdown:
┌──────────────────────────────────────┐
│ 📁 All Categories [▼] │
├──────────────────────────────────────┤
│ 📁 All Categories │
│ ➡️ Arrows │
│ 💼 Business │
│ 💬 Communication │
│ 📱 Devices │
│ 📚 Education │
│ 📄 Files │
│ ❤️ Health │
│ 🎬 Media │
│ 🗺️ Navigation │
│ 🛒 Shopping │
│ 👥 Social │
│ 💻 Technology │
│ ✈️ Travel │
│ ☀️ Weather │
│ 🔲 UI Elements │
└──────────────────────────────────────┘
tip
Combine category filtering with search for the fastest results. For example, select "Business" category then search "chart" to find business chart icons quickly.
Searching Icons
Find icons quickly using the search feature.
Search Interface
Search Box:
┌─────────────────────────────────────────────────────────────┐
│ 🔎 │ arrow [×] │
└─────────────────────────────────────────────────────────────┘
▲
└── Type icon name, keyword, or category
Search Results:
┌─────────────────────────────────────────────────────────────┐
│ Found 247 icons matching "arrow" │
├─────────────────────────────────────────────────────────────┤
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │ → │ │ ← │ │ ↑ │ │ ↓ │ │ ↗ │ │ ↙ │ │
│ │right│ │left │ │ up │ │down │ │up-r │ │dn-l │ │
│ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘ │
│ │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │ ⟳ │ │ ⟲ │ │ ⇆ │ │ ⇅ │ │ ↩ │ │ ↪ │ │
│ │rotate│ │rotate│ │swap │ │sort │ │undo │ │redo │ │
│ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘ │
└─────────────────────────────────────────────────────────────┘
Search Tips
| Search Term | What It Finds |
|---|---|
arrow | All arrow-related icons |
user | User, profile, person icons |
check | Checkmarks, verification icons |
settings | Gear, cog, configuration icons |
play | Media playback icons |
home | House, home navigation icons |
note
Search is case-insensitive and matches partial words. Searching "arr" will find "arrow", "arrange", etc.
Adding Icons to Canvas
Click to Add
Step 1: Find Icon Step 2: Click Icon
┌─────────────────────────┐ ┌─────────────────────────┐
│ │ │ │
│ ┌─────┐ │ │ ┌─────┐ │
│ │ ⭐ │ ← Find icon │ ───► │ │ ⭐ │ ← Click! │
│ │star │ │ │ │star │ [selected] │
│ └─────┘ │ │ └─────┘ │
│ │ │ │
└─────────────────────────┘ └─────────────────────────┘
Step 3: Icon Appears on Canvas
┌─────────────────────────────────────────────────────────────┐
│ │
│ ┌───────────┐ │
│ │ ⭐ │ ← New SVG object │
│ │ │ added to canvas │
│ └───────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
Icon Object Properties
When you add an icon to canvas, it becomes an SVG object with these properties:
Inspector Panel - SVG Icon Properties:
─────────────────────────────────────────────────
Position & Size
X: [250 ] Y: [150 ]
Width: [100 ] Height: [100 ]
Rotation: [0° ]
Appearance
Stroke Color: [#000000 ] [🎨]
Stroke Width: [2 ]
Fill Color: [#ffffff ] [🎨]
Animation
Type: [Draw In ▼]
Start: [0.0 ] s
Duration: [2.0 ] s
Layer
Order: [3 of 5 ]
[⬆ Move Up] [⬇ Move Down]
Vector Import Panel
For importing your own SVG files, use the Vector Import panel.
Opening Vector Import
┌─────────────────────────────────────────────────────────────┐
│ 🧩 Vector Import [×] │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ ││
│ │ 📂 Drop SVG file here ││
│ │ ││
│ │ or click to browse ││
│ │ ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ Supported: .svg, .svgz │
│ Max size: 10 MB │
│ │
└─────────────────────────────────────────────────────────────┘
Import Workflow
Step 1: Drop/Select Step 2: Preview Step 3: Configure
┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐
│ Drop SVG file │ │ SVG Preview │ │ Draw Settings │
│ │ │ │ │ │
│ ┌────────────┐ │ │ ┌────────────┐ │ │ Speed: [3s ] │
│ │ 📂 my.svg │ │ ───► │ │ [Preview] │ │ ───► │ Mode: [Draw In] │
│ └────────────┘ │ │ └────────────┘ │ │ Hand: [✓] │
│ │ │ │ │ │
│ │ │ Paths: 45 │ │ [Add to Canvas] │
└──────────────────┘ │ Size: 24 KB │ └──────────────────┘
└──────────────────┘
Supported Formats
| Format | Extension | Supported |
|---|---|---|
| SVG | .svg | ✅ Yes |
| Compressed SVG | .svgz | ✅ Yes |
| Bitmap in SVG | embedded PNG/JPG | ⚠️ Converted |
| Animated SVG | SMIL animations | ⚠️ Static only |
warning
Animated SVGs (with SMIL or CSS animations) are imported as static images. The animation is not preserved — Scribe Animator applies its own drawing animation to the paths.
SVG Processing Pipeline
When you import or add an SVG, it goes through a processing pipeline.
Pipeline Steps
SVG Input Processing Output
─────────────────────────────────────────────────────────────────────
┌─────────────┐ ┌──────────────┐ ┌───────────┐
│ Raw SVG │ ────────► │ Sanitize │ ────────► │ Clean SVG │
│ (user file) │ │ & Validate │ │ │
└─────────────┘ └──────────────┘ └───────────┘
│
▼
┌──────────────┐
│ Extract │
│ Paths │
└──────────────┘
│
▼
┌──────────────┐ ┌───────────┐
│ Measure & │ ────────► │ Optimized │
│ Optimize │ │ Paths │
└──────────────┘ └───────────┘
│
▼
┌──────────────┐ ┌───────────┐
│ Generate │ ────────► │ Animation │
│ Draw Order │ │ Sequence │
└──────────────┘ └───────────┘
Pipeline Statistics
When processing an SVG, you'll see stats like:
Processing Complete:
─────────────────────────────────────────────────
Input: my-icon.svg (24.5 KB)
Output: Optimized (18.2 KB, -26%)
Paths: 45 paths extracted
3 tiny paths dropped
42 paths kept
Duration: 145 ms
Profile: standard
tip
The pipeline automatically drops tiny paths (less than 3px) that would be invisible when animated. This keeps your animations clean and fast.
Raster Image Tracing
Import bitmap images (PNG, JPG) and convert them to animatable vectors.
Trace Panel
┌─────────────────────────────────────────────────────────────┐
│ 🖼️ Raster → Vector Trace [×] │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ [Original Image Preview] │ │
│ │ │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ Trace Settings │
│ ───────────────────────────────────────────────────────── │
│ Mode: [⚫ Black & White ▼] │
│ Threshold: [████████░░░░░░░░░░░░░] 128 │
│ Layers: [████████████░░░░░░░░░] 6 │
│ Corner: [████████████████░░░░░] 60° │
│ Speckle: [████░░░░░░░░░░░░░░░░░] 6 │
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ [Traced Vector Preview] │ │
│ │ │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ Paths: 156 • Est. draw time: 4.2s │
│ │
│ [Cancel] [Add to Canvas] │
└─────────────────────────────────────────────────────────────┘
Trace Modes
| Mode | Best For | Description |
|---|---|---|
| Black & White | Logos, line art | Single-color threshold trace |
| Color | Illustrations | Multi-color layer trace |
| Grayscale | Photos | Gradient layer trace |
Trace Settings Explained
| Setting | Range | Effect |
|---|---|---|
| Threshold | 0–255 | Brightness cutoff for B&W mode |
| Layers | 2–16 | Number of color layers to detect |
| Corner | 0–180° | Angle at which to create sharp corners |
| Speckle | 0–100 | Remove noise smaller than this size |
note
Photo-quality images may generate hundreds of paths, which can slow down animations. For photos, consider using the Image import instead of vector tracing.
Animation Settings
Configure how imported SVGs are animated.
Draw Settings Panel
Draw Animation Settings:
─────────────────────────────────────────────────
Speed
○ Duration: [3.0 ] seconds (fixed time)
● Speed: [500 ] pixels/second
Preview
Stroke Color: [#000000 ] [🎨]
Width Boost: [████░░░░░░░] 1.2x
Fill Strategy
○ No fill
○ Fill after draw
● Progressive fill (4 batches)
Path Filter
Min Length: [3 ] px (drop tiny paths)
Max Paths: [400 ] (performance limit)
[✓] Enable hand follower
Speed Options
| Option | Value | Use Case |
|---|---|---|
| Duration | 1–60 sec | Fixed animation time regardless of complexity |
| Speed (PPS) | 100–2000 | Consistent pixels-per-second rate |
tip
Use Duration mode for consistent timing across icons. Use Speed mode when complex icons should take longer than simple ones.
Custom Assets
Upload and manage your own assets for reuse.
Custom Assets Panel
┌─────────────────────────────────────────────────────────────┐
│ 📁 Custom Assets [×] │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 🔎 Search your assets... │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ [📤 Upload New Asset] │
│ │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ │ │ │ │ │ │
│ │ [logo.svg] │ │ [icon.svg] │ │ [brand.svg] │ │
│ │ │ │ │ │ │ │
│ │ My Logo │ │ Custom │ │ Brand │ │
│ │ [🗑️] │ │ [🗑️] │ │ [🗑️] │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │
│ 3 assets • Last upload: 2 hours ago │
└─────────────────────────────────────────────────────────────┘
Supported Upload Formats
| Format | Extension | Max Size |
|---|---|---|
| SVG | .svg | 10 MB |
| PNG | .png | 10 MB |
| JPEG | .jpg, .jpeg | 10 MB |
| WebP | .webp | 10 MB |
warning
Custom assets are stored locally in your browser. Clearing browser data will remove them. Export your project to preserve custom assets.
Backend API Reference
For developers: access icons programmatically.
API Endpoints
| Endpoint | Method | Description |
|---|---|---|
/api/assets | GET | List all available icons |
/api/assets/:id | GET | Get specific icon details |
/api/assets/serve/:id | GET | Serve icon SVG content |
/api/assets/search?q= | GET | Search icons by keyword |
Icon URL Format
Base URL:
https://scribe-animator-backend.sanjuoo7.workers.dev
Full Icon URL:
https://scribe-animator-backend.sanjuoo7.workers.dev/api/assets/serve/<ASSET_ID>
Example:
https://scribe-animator-backend.sanjuoo7.workers.dev/api/assets/serve/1766582628080-9e5ysfqz4
Using Icons in Templates
{
"requiredAssets": [
{
"type": "url",
"url": "/api/assets/serve/1766582628080-9e5ysfqz4",
"mime": "image/svg+xml"
}
]
}
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
A | Open Asset Library |
V | Open Vector Import |
Delete / Backspace | Delete selected object |
Ctrl/⌘ + D | Duplicate selected object |
Ctrl/⌘ + C | Copy selected object |
Ctrl/⌘ + V | Paste copied object |
Common Workflows
Workflow 1: Add Icon from Library
Step 1 Step 2 Step 3 Step 4
┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Click 📚 │ │ Type "check" │ │ Click │ │ Resize & │
│ Assets in │ ───► │ in search │ ───► │ checkmark │ ───► │ position on │
│ sidebar │ │ box │ │ icon │ │ canvas │
└──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘
Workflow 2: Import Custom Logo
Step 1 Step 2 Step 3
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Click 🧩 │ │ Drop your │ │ Adjust draw │
│ Vectors in │ ───► │ logo.svg │ ───► │ settings & │
│ sidebar │ │ file │ │ add to canvas│
└──────────────┘ └──────────────┘ └──────────────┘
Workflow 3: Trace a Sketch
Step 1 Step 2 Step 3 Step 4
┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Click 🧩 │ │ Drop sketch │ │ Adjust trace │ │ Add traced │
│ Vectors in │ ───► │ PNG/JPG │ ───► │ settings │ ───► │ vector to │
│ sidebar │ │ file │ │ (threshold) │ │ canvas │
└──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘
Troubleshooting
Icon Not Appearing
| Issue | Solution |
|---|---|
| Click doesn't add icon | Check if canvas is focused; click on canvas first |
| Icon appears off-screen | Pan the canvas or zoom out to find it |
| Icon is too small | Select and resize using corner handles |
Import Errors
| Error | Cause | Solution |
|---|---|---|
| "Invalid SVG" | Malformed XML | Validate SVG at svgomg.net first |
| "File too large" | Over 10 MB limit | Optimize SVG or compress image |
| "Too many paths" | Complex SVG | Simplify in vector editor, or increase max paths |
Performance Issues
| Symptom | Cause | Solution |
|---|---|---|
| Slow animation | Too many paths | Reduce path count, increase min length filter |
| Canvas lag | Large SVG | Reduce canvas size or icon count |
| Import hangs | Complex tracing | Use simpler image or reduce layers |
warning
SVGs with gradients or filters may not animate correctly. For best results, use flat-color SVGs with solid strokes and fills.
Best Practices
Choosing Icons
- Use the library first — Pre-optimized icons animate best
- Match icon style — Keep consistent stroke widths across icons
- Consider complexity — Simple icons animate faster and cleaner
Importing Custom SVGs
- Optimize first — Use SVGO or svgomg.net to clean up SVGs
- Flatten layers — Merge groups and flatten transforms
- Remove filters — Blur, shadow effects don't animate
- Expand strokes — Convert strokes to paths for consistent appearance
Performance Tips
- Limit icon count — Keep under 50 SVG objects per scene
- Use path filtering — Enable min length filter to drop tiny paths
- Batch animations — Stagger start times instead of simultaneous
- Reuse objects — Duplicate rather than importing multiple times
tip
Pro tip: For logos with complex paths, consider tracing a simplified version or recreating key elements manually for the cleanest animation.
Summary
| Feature | Location | Purpose |
|---|---|---|
| Asset Library | Left Sidebar → 📚 Assets | Browse 7,000+ curated SVG icons |
| Vector Import | Left Sidebar → 🧩 Vectors | Import your own SVG files |
| Custom Assets | Left Sidebar → 🖼️ Images | Manage uploaded assets |
| Raster Tracing | Vector Import Panel | Convert PNG/JPG to vectors |
The Asset Library and Vector Import tools give you complete flexibility for adding visual elements to your animations — from quick icon searches to custom logo imports and image tracing.
Related Documentation:
- Background & Canvas Settings — For canvas configuration
- Typography Text Guide — For adding and styling text
- Images & Vectors Guide — For detailed image handling