Dog breed icons from head portraits

A breed icon is a small round image of a dog's face. The head view at 512 pixels is made for it: transparent background, one breed, one standard framing. Crop it with a CSS circle, put a color behind it, and you have an avatar or a list icon with no image editing.

The head view

Every set on this site has nine views, and head is the head portrait. It is an AI-generated illustration, centered on a square canvas with a transparent background. The previews come in 512 and 1024 pixels. For icons, 512 is plenty, and it loads faster.

You get the URL from GET /api/v1/breeds/{breed}. No key is needed for previews. The reply has preview_512 for each view of each color variant.

One round avatar

The image is square, so a circle needs only border-radius: 50%. The background color shows through the transparent area and fills the circle.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Breed avatar</title>
  <style>
    body { font-family: sans-serif; padding: 24px; background: #fffaf0; }
    .avatar {
      width: 96px; height: 96px;
      border-radius: 50%;
      background: #f2c14e;
      object-fit: cover;
      display: block;
    }
  </style>
</head>
<body>
  <img id="a" class="avatar" alt="Pug head portrait">
  <p><a href="https://dogimage.dev/dogs/pug">Pug image: Dog Image API</a></p>
  <script>
    fetch("https://dogimage.dev/api/v1/breeds/pug")
      .then((r) => r.json())
      .then((breed) => {
        const v = breed.variants.find((x) => x.slug === breed.default_variant);
        document.getElementById("a").src = v.views.head.preview_512;
      });
  </script>
</body>
</html>

Pick the background from your brand. A mid-tone works on most breeds. A very dark background hides dark dogs, and a very light one hides white dogs, so test a Samoyed and a Doberman before you commit.

Sizes for lists

Set the size with CSS and keep the 512 file for every size. A few common choices:

If the dog looks small inside the circle, scale the image up a little inside a clipped wrapper. A wrapper with overflow: hidden and border-radius: 50%, holding an image at transform: scale(1.15), tightens the framing without a new file.

A small icon grid without a sprite

You do not need a sprite sheet. Each icon is its own cached file. Preview files are served with a one-year immutable cache header, so a repeat visit loads them from the browser cache.

The page below fetches the breed list once, then fetches the detail of eight chosen breeds and builds a grid.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Breed icon grid</title>
  <style>
    body { font-family: sans-serif; padding: 24px; background: #fffaf0; }
    #grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 20px; }
    figure { margin: 0; text-align: center; }
    img { width: 88px; height: 88px; border-radius: 50%; background: #bcd4c8; display: block; margin: 0 auto 6px; }
    figcaption { font-size: 14px; }
  </style>
</head>
<body>
  <div id="grid"></div>
  <p>Images: <a href="https://dogimage.dev/dogs">Dog Image API</a></p>
  <script>
    const base = "https://dogimage.dev/api/v1/breeds/";
    const slugs = ["pug", "golden-retriever", "german-shepherd", "french-bulldog", "samoyed", "beagle", "dachshund", "poodle"];
    const grid = document.getElementById("grid");

    Promise.all(slugs.map((s) => fetch(base + s).then((r) => r.json()))).then((breeds) => {
      for (const b of breeds) {
        const v = b.variants.find((x) => x.slug === b.default_variant);
        const fig = document.createElement("figure");
        const img = document.createElement("img");
        img.src = v.views.head.preview_512;
        img.alt = b.name + " head portrait";
        img.loading = "lazy";
        const cap = document.createElement("figcaption");
        cap.textContent = b.name;
        fig.append(img, cap);
        grid.append(fig);
      }
    });
  </script>
</body>
</html>

For a long list, do not fetch every breed at once. Fetch a breed when its row scrolls into view, or when the user picks it. The list from GET /api/v1/breeds gives you names and slugs, and the breed list guide shows how to read it.

Consistency tips

• Use the same view for every icon. Mixing head portraits with side views breaks the set.
• Use the same background for the whole grid, or a fixed palette you assign by breed group.
• Keep the same size in one list. The framing is standard, so faces line up.
• Some breeds have several colors. Read variants and choose one on purpose, or let the user choose.

Credit

Previews need a visible link that credits Dog Image API on the same page. Each breed page gives a ready snippet, for example Pug. One link near a grid of icons is enough when it is visible and clear. If you ship icons inside a product where a link does not fit, read the license and look at the paid full-size files, which need no credit. See pricing.