> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pictum.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Pictum

> A free, open-source one-stop shop for application assets.

Pictum is a free, [open-source](https://github.com/usepictum) one-stop shop for the visual assets applications need. Use it to render icons, deterministic avatars, QR codes, and placeholders through framework components, language helpers, or direct HTTP image URLs.

<Columns cols={2}>
  <Card title="Get started" icon="rocket" href="/quickstart" horizontal>
    Add your first Pictum assets with a guided example.
  </Card>

  <Card title="API reference" icon="square-terminal" href="/api-reference/overview" horizontal>
    Use direct HTTP URLs and inspect every endpoint.
  </Card>
</Columns>

## Choose your asset

<Columns cols={2}>
  <Card title="Icons" icon="shapes" href="/guides/icons">
    Choose an icon by collection and name, then render it as a component, URL, or SVG.
  </Card>

  <Card title="Avatars" icon="user" href="/guides/avatars">
    Turn a stable seed into an identicon, gradient, or initials avatar in your preferred image format.
  </Card>

  <Card title="QR Codes" icon="qr-code" href="/guides/qr-codes">
    Encode text or a URL as a scannable SVG, PNG, or WebP image.
  </Card>

  <Card title="Placeholders" icon="image" href="/guides/placeholders">
    Create square or custom-dimension images with optional text, colors, and retina density.
  </Card>
</Columns>

### See it live

Each preview below is loaded from Pictum through a normal image URL.

<Columns cols={4}>
  <Card title="Icon" href="/guides/icons">
    <img src="https://pictum.dev/v1/icons/lucide/sparkles.svg" alt="Sparkles icon rendered by Pictum" width="160" height="160" />
  </Card>

  <Card title="Realistic avatar" href="/guides/avatars#render-a-realistic-portrait">
    <img src="https://pictum.dev/v1/avatars/realistic/pictum.webp" alt="Realistic portrait assigned to the seed pictum" width="160" height="160" />
  </Card>

  <Card title="QR code" href="/guides/qr-codes">
    <img src="https://pictum.dev/v1/qr-codes.svg?data=aHR0cHM6Ly9waWN0dW0uZGV2&quiet_zone=0" alt="QR code generated by Pictum" width="160" height="160" />
  </Card>

  <Card title="Placeholder" href="/guides/placeholders">
    <img src="https://pictum.dev/v1/placeholders/320.svg?text=320" alt="Square placeholder generated by Pictum" width="160" height="160" />
  </Card>
</Columns>

## Why Pictum

<Columns cols={3}>
  <Card title="Free and open source" icon="github" href="https://github.com/usepictum">
    Use Pictum for free, inspect the source, or contribute on GitHub.
  </Card>

  <Card title="Consistent everywhere" icon="equal">
    Keep the same asset names, options, formats, and behavior across integrations.
  </Card>

  <Card title="SSR-friendly" icon="server">
    Generate asset URLs during server rendering without browser-only state.
  </Card>
</Columns>

## 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.

<Columns cols={3}>
  <Card title="React" icon="https://pictum.dev/v1/icons/devicon/react.svg" href="/integrations/react">
    Use typed components in JSX and matching helpers in application code.
  </Card>

  <Card title="Vue" icon="https://pictum.dev/v1/icons/devicon/vuejs.svg" href="/integrations/vue">
    Render assets in Vue templates and generate URLs from script code.
  </Card>

  <Card title="Laravel" icon="https://pictum.dev/v1/icons/devicon/laravel.svg" href="/integrations/laravel">
    Pair Blade components in views with PHP helpers in application code.
  </Card>

  <Card title="Svelte" icon="https://pictum.dev/v1/icons/devicon/svelte.svg" href="/integrations/svelte">
    Add asset components to Svelte markup and call helpers from scripts.
  </Card>

  <Card title="Astro" icon="https://pictum.dev/v1/icons/devicon/astro.svg" href="/integrations/astro">
    Use Astro components in templates and helpers in frontmatter or server code.
  </Card>
</Columns>

### Standalone

Work directly with JavaScript, TypeScript, PHP, browser-native custom elements, or plain HTTP.

<Columns cols={2}>
  <Card title="JavaScript" icon="https://pictum.dev/v1/icons/devicon/javascript.svg" href="/integrations/javascript">
    Generate asset URLs and retrieve SVG markup with fully typed helpers.
  </Card>

  <Card title="PHP" icon="https://pictum.dev/v1/icons/devicon/php.svg" href="/integrations/php">
    Generate asset URLs or render canonical SVG from framework-free PHP.
  </Card>

  <Card title="Web Components" icon="https://pictum.dev/v1/icons/devicon/html5.svg" href="/integrations/web-components">
    Register custom elements and render Pictum assets in browser-native HTML.
  </Card>

  <Card title="Direct HTTP" icon="globe" href="/api-reference/overview">
    Use cacheable image URLs directly in HTML, CSS, or any HTTP client.
  </Card>
</Columns>