Vector Documentation

1. What is WokGen Vector

WokGen Vector is a specialized icon and illustration generator built for designers. It produces clean, vector-art styled assets at precise dimensions — scalable icon sets, editorial spot illustrations, and design system components, all with consistent line weight and visual language.

Who it's for

• UI/UX designers — build cohesive icon libraries for web and mobile products without inconsistent stock icons.
• Design system maintainers — generate a full set of icons in a single style preset to keep visual language consistent across a product.
• Illustration teams — rapidly produce spot illustrations for landing pages, onboarding flows, and editorial layouts.
• Frontend developers — generate placeholder icons and illustrations during prototyping to iterate on layout before final design.

What WokGen Vector produces

All outputs are PNG by default with vector-art styling — clean geometric shapes, consistent stroke weights, and flat or outlined aesthetics. HD mode uses the Recraft V3 SVG model via Replicate to produce true vector-quality output at the highest fidelity. See HD Mode for details.

What WokGen Vector is NOT

WokGen Vector is not a general-purpose image or photo generator. It does not produce realistic photos, pixel art, or raster textures. Every output is constrained to vector-art aesthetics: clean geometry, flat or outlined shapes, and icon/illustration categories. For game sprites, use WokGen Pixel instead.

2. Tools Reference

WokGen Vector has two tools accessible from the top tab bar in the studio. Each tool is optimized for a different asset scale and use case.

Icon

The Icon tool generates scalable single-concept icons designed on a 24 px grid baseline. Icons are output at sizes from 24 px to 256 px. The rendering is optimized for clarity at small sizes — clean shapes, consistent stroke weight, minimal interior detail.

Best for:

• Navigation and UI icons — menu, search, settings, user, bell, home
• Action icons — add, delete, edit, share, download, upload
• Category icons — finance, health, travel, food, education
• Status indicators — success, warning, error, info
• Social and brand glyphs — email, phone, location, calendar
• Design system icon sets — consistent families of 20–200+ icons

Output: PNG with transparent background. File size is minimal at 24 px (1–3 KB) and moderate at 256 px (10–40 KB).

Grid baseline: All icons are designed on a 24 px optical grid, matching the convention used by Material Icons, Phosphor Icons, and Heroicons. This means icons generated at any size share the same proportional geometry and align naturally in icon grids.

Example prompts:

settings gear, minimal, 2px stroke
shopping cart, filled, rounded corners
bell notification, outlined, badge dot
user profile circle, filled
arrow up-right, sharp corners, navigation
wifi signal bars, three levels, outlined

Illustration

The Illustration tool generates larger spot illustrations in an editorial or product-marketing style. Illustrations are output at 256–768 px and are designed for use in empty-state screens, onboarding flows, landing pages, and editorial content.

Best for:

• Empty state illustrations — "no results", "inbox zero", "404 page"
• Onboarding step visuals — feature introduction, walkthrough screens
• Landing page hero supplements — supporting visuals alongside headlines
• Blog and editorial spot art — article header supplements, pull quotes
• Email and notification imagery — transactional email illustrations

Output: PNG with transparent or solid background. At 512 px, file sizes are typically 30–120 KB Standard, 60–200 KB HD.

Example prompts:

person celebrating with confetti, success state, flat illustration
empty inbox, no mail, calm and minimal, blue tones
rocket launching, onboarding step 1, bold flat style
team collaborating at whiteboard, editorial, warm colors
magnifying glass over documents, search empty state

3. Style Presets

Style presets define the visual language applied to all outputs. Choosing the right preset is the single most impactful decision for visual consistency across an icon set or illustration library.

Outline

Stroke-only rendering with no fill. Every shape is defined purely by its outline at a consistent stroke weight (approximately 1.5–2 px at 24 px base, scaled proportionally). This is the most versatile preset and the best default choice for developer tools, SaaS products, and neutral UI systems.

Filled

Solid flat shapes with no outline stroke. Fills are solid colors — no gradients, no shadows, no effects. This preset produces bold, high-contrast icons that are immediately recognizable at very small sizes (16–24 px) and work well in navigation bars and mobile UIs where clarity at small scale is critical.

Rounded

Soft rounded corners applied to all geometric elements — rectangles, paths, and angles all receive a consistent corner radius. This preset gives icons and illustrations a friendly, approachable character suitable for consumer-facing products in health, education, and lifestyle categories.

Sharp

Angular, precise corners with no rounding. Shapes are strictly geometric — squares, triangles, and angles are rendered at exact pixel boundaries. This preset produces a technical, rigorous aesthetic suited to finance applications, engineering tools, data dashboards, and B2B enterprise products.

4. Size Guide

Sizes are selected per-generation and can be changed freely between runs. The two tools (Icon and Illustration) have different size ranges reflecting their different use cases.

Icon sizes

Illustration sizes

HD mode and size

HD mode (Recraft V3) provides higher fidelity at any size, but becomes especially important at 128 px and above for icons, and at 512 px and above for illustrations. Below 64 px, Standard and HD results are visually similar — save your credits for larger outputs.

5. Prompting Guide

Prompting for vector icons and illustrations is different from prompting for pixel art or photos. Vector generation responds best to concept-first, noun-led descriptions with precise visual modifiers.

Core principle

Describe what the icon represents, not what you want the generation process to do. Lead with the subject, then add modifiers for shape, style, and context. Keep prompts concise — under 120 characters is ideal.

Good prompts vs bad prompts

Icons

Illustrations

Useful prompt modifiers

Color hints

• blue fill — requests a specific fill color for a filled-style icon
• monochrome — single-color output, good for icon sets that will be tinted in CSS
• warm tones, cool palette — broad color direction for illustrations
• black stroke on white — explicit contrast specification

Style overrides

• thick stroke — heavier line weight for bold, chunky icons
• thin stroke — lighter, more refined line weight
• no fill — forces outline-only even in Filled preset
• flat illustration — reinforces flat style for illustrations
• geometric shapes only — forces strict geometric construction, no organic curves

Category and context hints

• finance app icon set — primes the model for financial category visual language
• health & wellness — warmer, softer icon aesthetics
• developer tools — sharper, more technical icon treatment
• editorial illustration — more complex, narrative-driven compositions for illustrations

Consistency across a set

When building an icon set, use the same style prefix on every prompt. For example, if your set uses "outlined, 2px stroke, rounded", include that phrase at the start or end of every prompt. This keeps the visual language coherent even across varied concepts.

outlined, 2px stroke, rounded — settings gear
outlined, 2px stroke, rounded — user profile
outlined, 2px stroke, rounded — notification bell
outlined, 2px stroke, rounded — shopping cart

6. HD Mode

HD mode routes your generation through Recraft V3 — a dedicated vector-art model available via Replicate — instead of the standard Pollinations pipeline. It produces true vector-quality output with significantly higher fidelity, sharper geometry, and more accurate style adherence.

How HD mode works

1. You select HD in the quality toggle before generating.
2. Your prompt and settings are sent to Recraft V3 via Replicate's API.
3. Recraft V3 generates a native SVG-based output at the requested dimensions.
4. The result is delivered as a high-fidelity PNG to your gallery.

HD vs Standard comparison

When to use HD mode

• Final production exports for a live product
• Design system icon sets where visual consistency is critical
• Any icon at 128 px or larger
• Illustrations at 512 px or larger
• When presenting assets to stakeholders or clients

When Standard is sufficient

• Early-stage prompt iteration (refining concept and wording)
• Placeholder icons during wireframing or prototyping
• Icons at 24–64 px where the difference is minimal
• Internal team previews and design reviews

7. Batch & Variants

Batch mode generates multiple results from a single prompt in one click. Each result in a batch is a variant — the same concept rendered with a different seed, producing slight variations in angle, weight, framing, or detail emphasis.

Batch sizes

What varies between batch results

Each variant in a batch uses a different random seed. The concept and prompt remain identical, but the model explores different interpretations:

• Angle / perspective — slight rotation or viewing angle variation
• Stroke weight — minor variation in line thickness relative to canvas
• Framing — how tightly the subject is cropped within the canvas
• Detail emphasis — which secondary details are included or simplified

Batch and credits

In Standard mode, batches are always free regardless of size. In HD mode, a batch costs 2 credits per generationregardless of batch size — a ×4 HD batch costs 2 credits and returns 4 variants.

8. Export Guide

All generated assets are available for download from the gallery and studio. Multiple export formats and packaging options are supported.

Single PNG download

Every generated asset can be downloaded as a PNG directly from the gallery card or the studio result panel. Click the download button on any result to save it at full generation resolution with a transparent background.

ZIP pack export

Select multiple results in your gallery and use the Pack & Exportoption to download all selected icons or illustrations as a single ZIP archive. The ZIP contains individual PNG files named by prompt and generation ID for easy organization.

• Select assets using the checkbox on each gallery card
• Click Export Pack in the toolbar
• Choose file naming format (prompt-based or ID-based)
• Download the ZIP — files are ready for import into Figma, Sketch, or your asset pipeline

Future: SVG direct export

Direct SVG export (providing the raw SVG source from Recraft V3 HD generations) is planned for a future release. When available, SVG export will be accessible for all HD-generated assets and will include clean, optimized SVG markup suitable for inline use in HTML and React components.

Importing into Figma

1. Export your icon set as a ZIP from the gallery.
2. Unzip the archive to a local folder.
3. In Figma, use File → Import or drag the PNG files onto the canvas.
4. Select all imported icons and use Plugins → Batch Rename to organize by name.
5. For icon components, convert each PNG to a component (⌥⌘K) and organize into a component set.

9. Workspaces

Workspaces let you organize your generated assets by project. Each workspace is dedicated to a single mode — a Vector workspace contains only Vector generations, keeping icon sets and illustration libraries cleanly separated from other mode outputs.

Creating a workspace

1. Open Vector mode at /vector/studio.
2. Click the workspace selector in the top bar.
3. Select New Workspace and give it a project name.
4. All generations in this session will be saved to that workspace automatically.

Workspace best practices

• One workspace per product or client — keep a "Acme App Icons" workspace separate from "Personal Project Illustrations".
• Name by style preset — if you maintain multiple icon families with different presets, name workspaces by preset: "ProductName — Outline", "ProductName — Filled".
• Use workspace notes — add a description to your workspace with your style prefix so you can reference it quickly during generation sessions.

Workspace and gallery

Workspaces are private by default. Assets within a workspace can be selectively shared to the Community Gallery (see Community Gallery). Deleting a workspace does not immediately delete the assets — they move to your Unsorted gallery and can be reassigned.

10. Community Gallery

The Community Gallery is an opt-in public showcase of Vector generations shared by WokGen users. You can browse it for inspiration, discover prompt patterns, and share your own work.

Sharing to the gallery

Sharing is always opt-in. To share a result:

1. Open the asset in your gallery or studio result panel.
2. Click Share to Community.
3. The asset becomes visible at /vector/gallery filtered by your style preset and tool type.

Browsing the gallery

The Vector gallery at /vector/gallery can be filtered by:

• Style preset — Outline, Filled, Rounded, Sharp
• Tool — Icon or Illustration
• Size — filter by output dimensions
• HD / Standard — filter by quality tier

11. Credits & Plans

Standard (free)

Standard mode is always free and uses the Pollinations provider. There are no generation limits on Standard — generate as many icons and illustrations as you need without consuming any credits. Standard is the right tier for all iteration, prototyping, and non-production use.

HD (credit-based)

HD mode uses Recraft V3 via Replicate and costs 2 HD credits per generation. Credits apply per generation request, not per individual image in a batch — a ×4 HD batch returns 4 images for 2 credits.

Acquiring credits

HD credits can be purchased as bundles from the Billing & Plans page. Some subscription plans include a monthly HD credit allocation. See the billing docs for current bundle pricing and plan details.

12. FAQ

Can I use WokGen Vector outputs commercially?

Yes. All outputs generated by WokGen Vector are released under the Apache-2.0 license. You can use them in commercial products, client work, SaaS applications, and marketing materials without restriction or attribution requirement.

Can I get true SVG files?

HD mode uses the Recraft V3 SVG model, which generates native SVG internally. Currently, outputs are delivered as high-fidelity PNGs. Direct SVG export (raw SVG source) is planned for a future release. For now, HD PNGs can be auto-traced to clean SVG using Inkscape, Adobe Illustrator, or Vectorizer.ai with very good results given the vector-art aesthetic of Recraft V3 outputs.

What's the difference between Icon and Illustration?

The difference is scale and complexity. Icon is optimized for single-concept symbols at small sizes (24–256 px), designed on a 24 px grid for UI clarity. Illustration is optimized for larger, narrative or scene-based compositions (256–768 px) with more visual complexity and editorial character. Use Icon for UI elements and design systems. Use Illustration for empty states, onboarding screens, and editorial layouts.

How do I keep an icon set visually consistent?

Use the same style preset for every icon in the set, and include a consistent style prefix in every prompt (e.g. outlined, 2px stroke, rounded —). Keep icons in the same workspace, generate at the same size, and use ×4 batch to pick the most consistent variant from each generation. See the Prompting Guide for more detail.

Does batch mode produce the same icon multiple times?

No. Each result in a batch uses a different random seed, producing genuine variants of the concept with differences in angle, weight, framing, and detail. You are not paying for duplicates — you are getting multiple valid interpretations to choose from.

What happens to my assets if I delete a workspace?

Deleting a workspace does not delete your assets. All assets from the deleted workspace are moved to your Unsorted gallery and remain accessible. You can reassign them to a new workspace at any time.

Is there a bulk generation API?

Yes — the WokGen API supports programmatic Vector generation. See the API Reference for endpoint documentation, authentication setup, and response format details.