Get started
Add your first Pictum assets with a guided example.
API reference
Use direct HTTP URLs and inspect every endpoint.
Choose your asset
Icons
Choose an icon by collection and name, then render it as a component, URL, or SVG.
Avatars
Turn a stable seed into an identicon, gradient, or initials avatar in your preferred image format.
QR Codes
Encode text or a URL as a scannable SVG, PNG, or WebP image.
Placeholders
Create square or custom-dimension images with optional text, colors, and retina density.
See it live
Each preview below is loaded from Pictum through a normal image URL.Icon
Realistic avatar
QR code
Placeholder
Why Pictum
Free and open source
Use Pictum for free, inspect the source, or contribute on GitHub.
Consistent everywhere
Keep the same asset names, options, formats, and behavior across integrations.
SSR-friendly
Generate asset URLs during server rendering without browser-only state.
Integrations
Every Pictum integration follows the same asset contract, so names, options, formats, and output behavior stay consistent across frameworks and standalone applications.Frameworks
Choose a framework package for SSR-friendly native components backed by the same URL and SVG helpers.
React
Use typed components in JSX and matching helpers in application code.
Vue
Render assets in Vue templates and generate URLs from script code.
Laravel
Pair Blade components in views with PHP helpers in application code.
Svelte
Add asset components to Svelte markup and call helpers from scripts.
Astro
Use Astro components in templates and helpers in frontmatter or server code.
Standalone
Work directly with JavaScript, TypeScript, PHP, browser-native custom elements, or plain HTTP.
JavaScript
Generate asset URLs and retrieve SVG markup with fully typed helpers.
PHP
Generate asset URLs or render canonical SVG from framework-free PHP.
Web Components
Register custom elements and render Pictum assets in browser-native HTML.
Direct HTTP
Use cacheable image URLs directly in HTML, CSS, or any HTTP client.