Appearance

Use Suils in HTML & CSS ​

No build step, no library — a Suils avatar is just an image URL.

As an <img> ​

html
<img
  src="https://avatars.suils.es/suils/svg?seed=Anna"
  width="96"
  height="96"
  alt="Anna's avatar"
/>
https://avatars.suils.es/suils/svg?seed=Anna
Avatar preview

Use a stable identifier (user ID, email, username) as the seed so each user keeps the same avatar.

As a CSS background ​

css
.avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: center / cover
    url('https://avatars.suils.es/kawaii/svg?seed=Anna');
}

Rounding an avatar ​

SVGs fill their box, so round them with CSS:

html
<img
  src="https://avatars.suils.es/cat/svg?seed=Milo&backgroundColor=b6e3f4"
  style="width: 96px; height: 96px; border-radius: 50%"
  alt="Milo"
/>

Need a raster file? ​

For email, Open Graph images, or anywhere SVG isn't supported, request png (or jpg / webp / avif) and a size:

html
<img
  src="https://avatars.suils.es/robot/png?seed=Ada&size=256"
  width="128"
  height="128"
  alt="Ada"
/>