12 illustrations

Isometric scenes for empty states, error pages and onboarding — one file each, light and dark decided by the reader rather than by which file you linked.

Isometric scenes, each one file for light and dark.

Palette

Scheme

12 shown

Empty inbox

An empty state for a list that will fill up — an inbox, a queue, a feed. The tray is open and the one item is leaving, which reads as "nothing here yet" rather than "something went wrong".

Download

htmlSVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-120 -150 240 220" role="img" width="480" height="440" class="a-indigo-auto">
  <title>Empty inbox</title>
  <style>
    .a-indigo-auto {
      --a-bg: #f5f3ff;
      --a-base: #c7d2fe;
      --a-accent: #4f46e5;
      --a-ink: #1e1b4b;
      --a-tint: #e0e7ff;
    }
    @media (prefers-color-scheme: dark) {
      .a-indigo-auto {
        --a-bg: #1e1b4b;
        --a-base: #4338ca;
        --a-accent: #a5b4fc;
        --a-ink: #eef2ff;
        --a-tint: #312e81;
      }
    }
  </style>
  <g>
    <ellipse cx="0" cy="16" rx="50.95" ry="29.42" fill="#000000" opacity="0.08" />
    <path d="M -41.57 -6.4 L -41.57 0 L 0 24 L 0 17.6 Z" fill="var(--a-tint, #e0e7ff)" />
    <path d="M -41.57 -6.4 L -41.57 0 L 0 24 L 0 17.6 Z" fill="#000000" opacity="0.22" />
    <path d="M 41.57 -6.4 L 41.57 0 L 0 24 L 0 17.6 Z" fill="var(--a-tint, #e0e7ff)" />
    <path d="M 41.57 -6.4 L 41.57 0 L 0 24 L 0 17.6 Z" fill="#000000" opacity="0.1" />
    <path d="M 0 -30.4 L 41.57 -6.4 L 0 17.6 L -41.57 -6.4 Z" fill="var(--a-tint, #e0e7ff)" />
    <path d="M 0 -30.4 L 41.57 -6.4 L 0 17.6 L -41.57 -6.4 Z" fill="#ffffff" opacity="0.18" />
    <path d="M -4.16 -42.4 L -4.16 -28 L 37.41 -4 L 37.41 -18.4 Z" fill="var(--a-base, #c7d2fe)" />
    <path d="M -4.16 -42.4 L -4.16 -28 L 37.41 -4 L 37.41 -18.4 Z" fill="#000000" opacity="0.22" />
    <path d="M 41.57 -20.8 L 41.57 -6.4 L 37.41 -4 L 37.41 -18.4 Z" fill="var(--a-base, #c7d2fe)" />
    <path d="M 41.57 -20.8 L 41.57 -6.4 L 37.41 -4 L 37.41 -18.4 Z" fill="#000000" opacity="0.1" />
    <path d="M 0 -44.8 L 41.57 -20.8 L 37.41 -18.4 L -4.16 -42.4 Z" fill="var(--a-base, #c7d2fe)" />
    <path d="M 0 -44.8 L 41.57 -20.8 L 37.41 -18.4 L -4.16 -42.4 Z" fill="#ffffff" opacity="0.18" />
    <path d="M -37.41 -23.2 L -37.41 -8.8 L -33.26 -6.4 L -33.26 -20.8 Z" fill="var(--a-base, #c7d2fe)" />
    <path d="M -37.41 -23.2 L -37.41 -8.8 L -33.26 -6.4 L -33.26 -20.8 Z" fill="#000000" opacity="0.22" />
    <path d="M 0 -40 L 0 -25.6 L -33.26 -6.4 L -33.26 -20.8 Z" fill="var(--a-base, #c7d2fe)" />
    <path d="M 0 -40 L 0 -25.6 L -33.26 -6.4 L -33.26 -20.8 Z" fill="#000000" opacity="0.1" />
    <path d="M -4.16 -42.4 L 0 -40 L -33.26 -20.8 L -37.41 -23.2 Z" fill="var(--a-base, #c7d2fe)" />
    <path d="M -4.16 -42.4 L 0 -40 L -33.26 -20.8 L -37.41 -23.2 Z" fill="#ffffff" opacity="0.18" />
    <path d="M -41.57 -20.8 L -41.57 -6.4 L 0 17.6 L 0 3.2 Z" fill="var(--a-base, #c7d2fe)" />
    <path d="M -41.57 -20.8 L -41.57 -6.4 L 0 17.6 L 0 3.2 Z" fill="#000000" opacity="0.22" />
    <path d="M 4.16 0.8 L 4.16 15.2 L 0 17.6 L 0 3.2 Z" fill="var(--a-base, #c7d2fe)" />
    <path d="M 4.16 0.8 L 4.16 15.2 L 0 17.6 L 0 3.2 Z" fill="#000000" opacity="0.1" />
    <path d="M -37.41 -23.2 L 4.16 0.8 L 0 3.2 L -41.57 -20.8 Z" fill="var(--a-base, #c7d2fe)" />
    <path d="M -37.41 -23.2 L 4.16 0.8 L 0 3.2 L -41.57 -20.8 Z" fill="#ffffff" opacity="0.18" />
    <path d="M 0 -1.6 L 0 12.8 L 4.16 15.2 L 4.16 0.8 Z" fill="var(--a-base, #c7d2fe)" />
    <path d="M 0 -1.6 L 0 12.8 L 4.16 15.2 L 4.16 0.8 Z" fill="#000000" opacity="0.22" />
    <path d="M 37.41 -18.4 L 37.41 -4 L 4.16 15.2 L 4.16 0.8 Z" fill="var(--a-base, #c7d2fe)" />
    <path d="M 37.41 -18.4 L 37.41 -4 L 4.16 15.2 L 4.16 0.8 Z" fill="#000000" opacity="0.1" />
    <path d="M 33.26 -20.8 L 37.41 -18.4 L 4.16 0.8 L 0 -1.6 Z" fill="var(--a-base, #c7d2fe)" />
    <path d="M 33.26 -20.8 L 37.41 -18.4 L 4.16 0.8 L 0 -1.6 Z" fill="#ffffff" opacity="0.18" />
    <path d="M -16.63 -47.68 L -16.63 -44.8 L 5.54 -32 L 5.54 -34.88 Z" fill="var(--a-accent, #4f46e5)" />
    <path d="M -16.63 -47.68 L -16.63 -44.8 L 5.54 -32 L 5.54 -34.88 Z" fill="#000000" opacity="0.22" />
    <path d="M 22.17 -44.48 L 22.17 -41.6 L 5.54 -32 L 5.54 -34.88 Z" fill="var(--a-accent, #4f46e5)" />
    <path d="M 22.17 -44.48 L 22.17 -41.6 L 5.54 -32 L 5.54 -34.88 Z" fill="#000000" opacity="0.1" />
    <path d="M 0 -57.28 L 22.17 -44.48 L 5.54 -34.88 L -16.63 -47.68 Z" fill="var(--a-accent, #4f46e5)" />
    <path d="M 0 -57.28 L 22.17 -44.48 L 5.54 -34.88 L -16.63 -47.68 Z" fill="#ffffff" opacity="0.18" />
  </g>
</svg>

tsxReact component

import type * as React from 'react'

export function EmptyInboxIllustration(props: React.SVGProps<SVGSVGElement>) {
  return (
      <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="-120 -150 240 220" role="img" width="320" height="293" className="a-indigo-auto">
      <title>Empty inbox</title>
      <style>
      .a-indigo-auto {
      --a-bg: #f5f3ff;
      --a-base: #c7d2fe;
      --a-accent: #4f46e5;
      --a-ink: #1e1b4b;
      --a-tint: #e0e7ff;
      }
      @media (prefers-color-scheme: dark) {
      .a-indigo-auto {
      --a-bg: #1e1b4b;
      --a-base: #4338ca;
      --a-accent: #a5b4fc;
      --a-ink: #eef2ff;
      --a-tint: #312e81;
      }
      }
      </style>
      <g>
      <ellipse cx="0" cy="16" rx="50.95" ry="29.42" fill="#000000" opacity="0.08"  />
      <path d="M -41.57 -6.4 L -41.57 0 L 0 24 L 0 17.6 Z" fill="var(--a-tint, #e0e7ff)"  />
      <path d="M -41.57 -6.4 L -41.57 0 L 0 24 L 0 17.6 Z" fill="#000000" opacity="0.22"  />
      <path d="M 41.57 -6.4 L 41.57 0 L 0 24 L 0 17.6 Z" fill="var(--a-tint, #e0e7ff)"  />
      <path d="M 41.57 -6.4 L 41.57 0 L 0 24 L 0 17.6 Z" fill="#000000" opacity="0.1"  />
      <path d="M 0 -30.4 L 41.57 -6.4 L 0 17.6 L -41.57 -6.4 Z" fill="var(--a-tint, #e0e7ff)"  />
      <path d="M 0 -30.4 L 41.57 -6.4 L 0 17.6 L -41.57 -6.4 Z" fill="#ffffff" opacity="0.18"  />
      <path d="M -4.16 -42.4 L -4.16 -28 L 37.41 -4 L 37.41 -18.4 Z" fill="var(--a-base, #c7d2fe)"  />
      <path d="M -4.16 -42.4 L -4.16 -28 L 37.41 -4 L 37.41 -18.4 Z" fill="#000000" opacity="0.22"  />
      <path d="M 41.57 -20.8 L 41.57 -6.4 L 37.41 -4 L 37.41 -18.4 Z" fill="var(--a-base, #c7d2fe)"  />
      <path d="M 41.57 -20.8 L 41.57 -6.4 L 37.41 -4 L 37.41 -18.4 Z" fill="#000000" opacity="0.1"  />
      <path d="M 0 -44.8 L 41.57 -20.8 L 37.41 -18.4 L -4.16 -42.4 Z" fill="var(--a-base, #c7d2fe)"  />
      <path d="M 0 -44.8 L 41.57 -20.8 L 37.41 -18.4 L -4.16 -42.4 Z" fill="#ffffff" opacity="0.18"  />
      <path d="M -37.41 -23.2 L -37.41 -8.8 L -33.26 -6.4 L -33.26 -20.8 Z" fill="var(--a-base, #c7d2fe)"  />
      <path d="M -37.41 -23.2 L -37.41 -8.8 L -33.26 -6.4 L -33.26 -20.8 Z" fill="#000000" opacity="0.22"  />
      <path d="M 0 -40 L 0 -25.6 L -33.26 -6.4 L -33.26 -20.8 Z" fill="var(--a-base, #c7d2fe)"  />
      <path d="M 0 -40 L 0 -25.6 L -33.26 -6.4 L -33.26 -20.8 Z" fill="#000000" opacity="0.1"  />
      <path d="M -4.16 -42.4 L 0 -40 L -33.26 -20.8 L -37.41 -23.2 Z" fill="var(--a-base, #c7d2fe)"  />
      <path d="M -4.16 -42.4 L 0 -40 L -33.26 -20.8 L -37.41 -23.2 Z" fill="#ffffff" opacity="0.18"  />
      <path d="M -41.57 -20.8 L -41.57 -6.4 L 0 17.6 L 0 3.2 Z" fill="var(--a-base, #c7d2fe)"  />
      <path d="M -41.57 -20.8 L -41.57 -6.4 L 0 17.6 L 0 3.2 Z" fill="#000000" opacity="0.22"  />
      <path d="M 4.16 0.8 L 4.16 15.2 L 0 17.6 L 0 3.2 Z" fill="var(--a-base, #c7d2fe)"  />
      <path d="M 4.16 0.8 L 4.16 15.2 L 0 17.6 L 0 3.2 Z" fill="#000000" opacity="0.1"  />
      <path d="M -37.41 -23.2 L 4.16 0.8 L 0 3.2 L -41.57 -20.8 Z" fill="var(--a-base, #c7d2fe)"  />
      <path d="M -37.41 -23.2 L 4.16 0.8 L 0 3.2 L -41.57 -20.8 Z" fill="#ffffff" opacity="0.18"  />
      <path d="M 0 -1.6 L 0 12.8 L 4.16 15.2 L 4.16 0.8 Z" fill="var(--a-base, #c7d2fe)"  />
      <path d="M 0 -1.6 L 0 12.8 L 4.16 15.2 L 4.16 0.8 Z" fill="#000000" opacity="0.22"  />
      <path d="M 37.41 -18.4 L 37.41 -4 L 4.16 15.2 L 4.16 0.8 Z" fill="var(--a-base, #c7d2fe)"  />
      <path d="M 37.41 -18.4 L 37.41 -4 L 4.16 15.2 L 4.16 0.8 Z" fill="#000000" opacity="0.1"  />
      <path d="M 33.26 -20.8 L 37.41 -18.4 L 4.16 0.8 L 0 -1.6 Z" fill="var(--a-base, #c7d2fe)"  />
      <path d="M 33.26 -20.8 L 37.41 -18.4 L 4.16 0.8 L 0 -1.6 Z" fill="#ffffff" opacity="0.18"  />
      <path d="M -16.63 -47.68 L -16.63 -44.8 L 5.54 -32 L 5.54 -34.88 Z" fill="var(--a-accent, #4f46e5)"  />
      <path d="M -16.63 -47.68 L -16.63 -44.8 L 5.54 -32 L 5.54 -34.88 Z" fill="#000000" opacity="0.22"  />
      <path d="M 22.17 -44.48 L 22.17 -41.6 L 5.54 -32 L 5.54 -34.88 Z" fill="var(--a-accent, #4f46e5)"  />
      <path d="M 22.17 -44.48 L 22.17 -41.6 L 5.54 -32 L 5.54 -34.88 Z" fill="#000000" opacity="0.1"  />
      <path d="M 0 -57.28 L 22.17 -44.48 L 5.54 -34.88 L -16.63 -47.68 Z" fill="var(--a-accent, #4f46e5)"  />
      <path d="M 0 -57.28 L 22.17 -44.48 L 5.54 -34.88 L -16.63 -47.68 Z" fill="#ffffff" opacity="0.18"  />
      </g>
      </svg>
  )
}

an isometric renderer crossed with scenes described as stacked solids. Free for anything, including commercial work, with no attribution.

import type * as React from 'react' export function EmptyInboxIllustration(props: React.SVGProps<SVGSVGElement>) { return ( <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="-120 -150 240 220" role="img" width="320" height="293" className="a-indigo-auto"> <title>Empty inbox</title> <style> .a-indigo-auto { --a-bg: #f5f3ff; --a-base: #c7d2fe; --a-accent: #4f46e5; --a-ink: #1e1b4b; --a-tint: #e0e7ff; } @media (prefers-color-scheme: dark) { .a-indigo-auto { --a-bg: #1e1b4b; --a-base: #4338ca; --a-accent: #a5b4fc; --a-ink: #eef2ff; --a-tint: #312e81; } } </style> <g> <ellipse cx="0" cy="16" rx="50.95" ry="29.42" fill="#000000" opacity="0.08" /> <path d="M -41.57 -6.4 L -41.57 0 L 0 24 L 0 17.6 Z" fill="var(--a-tint, #e0e7ff)" /> <path d="M -41.57 -6.4 L -41.57 0 L 0 24 L 0 17.6 Z" fill="#000000" opacity="0.22" /> <path d="M 41.57 -6.4 L 41.57 0 L 0 24 L 0 17.6 Z" fill="var(--a-tint, #e0e7ff)" /> <path d="M 41.57 -6.4 L 41.57 0 L 0 24 L 0 17.6 Z" fill="#000000" opacity="0.1" /> <path d="M 0 -30.4 L 41.57 -6.4 L 0 17.6 L -41.57 -6.4 Z" fill="var(--a-tint, #e0e7ff)" /> <path d="M 0 -30.4 L 41.57 -6.4 L 0 17.6 L -41.57 -6.4 Z" fill="#ffffff" opacity="0.18" /> <path d="M -4.16 -42.4 L -4.16 -28 L 37.41 -4 L 37.41 -18.4 Z" fill="var(--a-base, #c7d2fe)" /> <path d="M -4.16 -42.4 L -4.16 -28 L 37.41 -4 L 37.41 -18.4 Z" fill="#000000" opacity="0.22" /> <path d="M 41.57 -20.8 L 41.57 -6.4 L 37.41 -4 L 37.41 -18.4 Z" fill="var(--a-base, #c7d2fe)" /> <path d="M 41.57 -20.8 L 41.57 -6.4 L 37.41 -4 L 37.41 -18.4 Z" fill="#000000" opacity="0.1" /> <path d="M 0 -44.8 L 41.57 -20.8 L 37.41 -18.4 L -4.16 -42.4 Z" fill="var(--a-base, #c7d2fe)" /> <path d="M 0 -44.8 L 41.57 -20.8 L 37.41 -18.4 L -4.16 -42.4 Z" fill="#ffffff" opacity="0.18" /> <path d="M -37.41 -23.2 L -37.41 -8.8 L -33.26 -6.4 L -33.26 -20.8 Z" fill="var(--a-base, #c7d2fe)" /> <path d="M -37.41 -23.2 L -37.41 -8.8 L -33.26 -6.4 L -33.26 -20.8 Z" fill="#000000" opacity="0.22" /> <path d="M 0 -40 L 0 -25.6 L -33.26 -6.4 L -33.26 -20.8 Z" fill="var(--a-base, #c7d2fe)" /> <path d="M 0 -40 L 0 -25.6 L -33.26 -6.4 L -33.26 -20.8 Z" fill="#000000" opacity="0.1" /> <path d="M -4.16 -42.4 L 0 -40 L -33.26 -20.8 L -37.41 -23.2 Z" fill="var(--a-base, #c7d2fe)" /> <path d="M -4.16 -42.4 L 0 -40 L -33.26 -20.8 L -37.41 -23.2 Z" fill="#ffffff" opacity="0.18" /> <path d="M -41.57 -20.8 L -41.57 -6.4 L 0 17.6 L 0 3.2 Z" fill="var(--a-base, #c7d2fe)" /> <path d="M -41.57 -20.8 L -41.57 -6.4 L 0 17.6 L 0 3.2 Z" fill="#000000" opacity="0.22" /> <path d="M 4.16 0.8 L 4.16 15.2 L 0 17.6 L 0 3.2 Z" fill="var(--a-base, #c7d2fe)" /> <path d="M 4.16 0.8 L 4.16 15.2 L 0 17.6 L 0 3.2 Z" fill="#000000" opacity="0.1" /> <path d="M -37.41 -23.2 L 4.16 0.8 L 0 3.2 L -41.57 -20.8 Z" fill="var(--a-base, #c7d2fe)" /> <path d="M -37.41 -23.2 L 4.16 0.8 L 0 3.2 L -41.57 -20.8 Z" fill="#ffffff" opacity="0.18" /> <path d="M 0 -1.6 L 0 12.8 L 4.16 15.2 L 4.16 0.8 Z" fill="var(--a-base, #c7d2fe)" /> <path d="M 0 -1.6 L 0 12.8 L 4.16 15.2 L 4.16 0.8 Z" fill="#000000" opacity="0.22" /> <path d="M 37.41 -18.4 L 37.41 -4 L 4.16 15.2 L 4.16 0.8 Z" fill="var(--a-base, #c7d2fe)" /> <path d="M 37.41 -18.4 L 37.41 -4 L 4.16 15.2 L 4.16 0.8 Z" fill="#000000" opacity="0.1" /> <path d="M 33.26 -20.8 L 37.41 -18.4 L 4.16 0.8 L 0 -1.6 Z" fill="var(--a-base, #c7d2fe)" /> <path d="M 33.26 -20.8 L 37.41 -18.4 L 4.16 0.8 L 0 -1.6 Z" fill="#ffffff" opacity="0.18" /> <path d="M -16.63 -47.68 L -16.63 -44.8 L 5.54 -32 L 5.54 -34.88 Z" fill="var(--a-accent, #4f46e5)" /> <path d="M -16.63 -47.68 L -16.63 -44.8 L 5.54 -32 L 5.54 -34.88 Z" fill="#000000" opacity="0.22" /> <path d="M 22.17 -44.48 L 22.17 -41.6 L 5.54 -32 L 5.54 -34.88 Z" fill="var(--a-accent, #4f46e5)" /> <path d="M 22.17 -44.48 L 22.17 -41.6 L 5.54 -32 L 5.54 -34.88 Z" fill="#000000" opacity="0.1" /> <path d="M 0 -57.28 L 22.17 -44.48 L 5.54 -34.88 L -16.63 -47.68 Z" fill="var(--a-accent, #4f46e5)" /> <path d="M 0 -57.28 L 22.17 -44.48 L 5.54 -34.88 L -16.63 -47.68 Z" fill="#ffffff" opacity="0.18" /> </g> </svg> ) }