372 avatars

Drawn, not photographed, and generated from a seed — so a placeholder face is nobody’s face, and the set is as large as you need it to be.

4 styles × 93 names, and unlimited by seed.

Palette

Scheme

Style

93 shown

Amara Okonkwo · face

A drawn character. The one to use where the design needs to read as a person — a testimonial, a team grid, a comment thread.

Download

htmlSVG

<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 64 64" aria-hidden="true" focusable="false" class="a-indigo-auto">
  <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>
  <rect width="64" height="64" rx="12" fill="var(--a-tint, #e0e7ff)" />
<path d="M14 64c0-9 8-14 18-14s18 5 18 14Z" fill="var(--a-accent, #4f46e5)" /><path d="M27 51l5 8 5-8" fill="#ffffff" opacity="0.18" />
  <circle cx="17" cy="32" r="3" fill="#75492c" />
  <circle cx="47" cy="32" r="3" fill="#75492c" />
  <ellipse cx="32" cy="31" rx="15" ry="17" fill="#75492c" />
  <path d="M22 34q10 10 20 0q-2 11-10 11t-10-11Z" fill="#6b4a2f" opacity="0.22" />
  <path d="M18 26c0-10 6-15 14-15s14 5 14 15c-2-6-6-9-14-9s-12 3-14 9Zm14-18c-3 0-5-2-5-4s2-3 5-3 5 1 5 3-2 4-5 4Z" fill="#6b4a2f" />
  <circle cx="25" cy="30" r="2.4" fill="#fff" stroke="#2b2b2b" stroke-width="1.2" /><circle cx="39" cy="30" r="2.4" fill="#fff" stroke="#2b2b2b" stroke-width="1.2" /><circle cx="25" cy="30.4" r="1.1" fill="#2b2b2b" /><circle cx="39" cy="30.4" r="1.1" fill="#2b2b2b" />
  <ellipse cx="32" cy="38.5" rx="2.4" ry="2" fill="#9a5b4a" />
  <g fill="none" stroke="var(--a-accent, #4f46e5)" stroke-width="1.6"><circle cx="25" cy="30" r="5" /><circle cx="39" cy="30" r="5" /><path d="M30 30h4M20 29l-4-2M44 29l4-2" /></g>
</svg>

tsxReact component

import type * as React from 'react'

export function AvatarFaceAmaraOkonkwo(props: React.SVGProps<SVGSVGElement>) {
  return (
      <svg {...props} xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 64 64" aria-hidden="true" focusable="false" className="a-indigo-auto">
      <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>
      <rect width="64" height="64" rx="12" fill="var(--a-tint, #e0e7ff)"  />
      <path d="M14 64c0-9 8-14 18-14s18 5 18 14Z" fill="var(--a-accent, #4f46e5)"  /><path d="M27 51l5 8 5-8" fill="#ffffff" opacity="0.18"  />
      <circle cx="17" cy="32" r="3" fill="#75492c"  />
      <circle cx="47" cy="32" r="3" fill="#75492c"  />
      <ellipse cx="32" cy="31" rx="15" ry="17" fill="#75492c"  />
      <path d="M22 34q10 10 20 0q-2 11-10 11t-10-11Z" fill="#6b4a2f" opacity="0.22"  />
      <path d="M18 26c0-10 6-15 14-15s14 5 14 15c-2-6-6-9-14-9s-12 3-14 9Zm14-18c-3 0-5-2-5-4s2-3 5-3 5 1 5 3-2 4-5 4Z" fill="#6b4a2f"  />
      <circle cx="25" cy="30" r="2.4" fill="#fff" stroke="#2b2b2b" strokeWidth="1.2"  /><circle cx="39" cy="30" r="2.4" fill="#fff" stroke="#2b2b2b" strokeWidth="1.2"  /><circle cx="25" cy="30.4" r="1.1" fill="#2b2b2b"  /><circle cx="39" cy="30.4" r="1.1" fill="#2b2b2b"  />
      <ellipse cx="32" cy="38.5" rx="2.4" ry="2" fill="#9a5b4a"  />
      <g fill="none" stroke="var(--a-accent, #4f46e5)" strokeWidth="1.6"><circle cx="25" cy="30" r="5"  /><circle cx="39" cy="30" r="5"  /><path d="M30 30h4M20 29l-4-2M44 29l4-2"  /></g>
      </svg>
  )
}

tsAs placeholder data

{ name: "Amara Okonkwo", role: "Product designer", avatar: avatar("Amara Okonkwo") }

a seed crossed with face, hair, accessory and palette tables. Free for anything, including commercial work, with no attribution.

import type * as React from 'react' export function AvatarFaceAmaraOkonkwo(props: React.SVGProps<SVGSVGElement>) { return ( <svg {...props} xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 64 64" aria-hidden="true" focusable="false" className="a-indigo-auto"> <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> <rect width="64" height="64" rx="12" fill="var(--a-tint, #e0e7ff)" /> <path d="M14 64c0-9 8-14 18-14s18 5 18 14Z" fill="var(--a-accent, #4f46e5)" /><path d="M27 51l5 8 5-8" fill="#ffffff" opacity="0.18" /> <circle cx="17" cy="32" r="3" fill="#75492c" /> <circle cx="47" cy="32" r="3" fill="#75492c" /> <ellipse cx="32" cy="31" rx="15" ry="17" fill="#75492c" /> <path d="M22 34q10 10 20 0q-2 11-10 11t-10-11Z" fill="#6b4a2f" opacity="0.22" /> <path d="M18 26c0-10 6-15 14-15s14 5 14 15c-2-6-6-9-14-9s-12 3-14 9Zm14-18c-3 0-5-2-5-4s2-3 5-3 5 1 5 3-2 4-5 4Z" fill="#6b4a2f" /> <circle cx="25" cy="30" r="2.4" fill="#fff" stroke="#2b2b2b" strokeWidth="1.2" /><circle cx="39" cy="30" r="2.4" fill="#fff" stroke="#2b2b2b" strokeWidth="1.2" /><circle cx="25" cy="30.4" r="1.1" fill="#2b2b2b" /><circle cx="39" cy="30.4" r="1.1" fill="#2b2b2b" /> <ellipse cx="32" cy="38.5" rx="2.4" ry="2" fill="#9a5b4a" /> <g fill="none" stroke="var(--a-accent, #4f46e5)" strokeWidth="1.6"><circle cx="25" cy="30" r="5" /><circle cx="39" cy="30" r="5" /><path d="M30 30h4M20 29l-4-2M44 29l4-2" /></g> </svg> ) }