Аватарка — самая незаметная картинка на сайте и одновременно самая назойливая по количеству мороки. Пользователь зарегистрировался и ничего не загрузил — чем закрыть дырку в интерфейсе? Дизайнер собирает макет личного кабинета — откуда взять два десятка разных лиц, чтобы список подписчиков не выглядел как один клон, размноженный копипастой? Оба вопроса решаются бесплатно, но решаются разными инструментами, и подборки обычно валят их в одну кучу.
Поэтому список ниже разделён надвое. Первые четыре пункта — генераторы, которые подключаются кодом: дёргаются по URL или ставятся из npm, отдают картинку прямо в рантайме и не требуют, чтобы кто-то заранее нарисовал аватарку для каждого юзера. Оставшиеся шесть — библиотеки ассетов для Figma и Sketch: их открывают в редакторе, собирают персонажей руками и экспортируют в макет или в проект. Мешать эти два лагеря бессмысленно: у них разные задачи, разный способ доставки и разные подводные камни с лицензиями.
По каждому пункту — что это, чем отдаёт результат, под какой лицензией и что важно знать до того, как встроишь. После списка — практический раздел про то, как аватарка живёт в вёрстке: детерминированный ключ, фолбэк на инициалы, фиксация коробки и приватность. А в самом конце — голосовалка: интересно, какой инструмент в итоге заберёт симпатии.
DiceBear
Самый универсальный инструмент в подборке и единственный, который закрывает задачу целиком: от плейсхолдера в списке комментариев до полноценной картинки профиля. DiceBear — это набор стилей плюс генератор, который превращает произвольную строку в предсказуемую картинку. Одинаковый ключ всегда даёт одинаковую аватарку, разный — разную, и хранить в базе нужно ровно ноль байт: ключом служит то, что и так есть, например идентификатор пользователя.
Дёргать проще всего по HTTP — без ключей, регистрации и подписей. Адрес строится из версии, имени стиля и формата:
<!-- SVG, детерминированно по идентификатору -->
<img src="https://api.dicebear.com/10.x/lorelei/svg?seed=user-8421"
alt="Аватарка участника" width="96" height="96">
<!-- растр с фоном и скруглением -->
<img src="https://api.dicebear.com/10.x/notionists/webp?seed=user-8421&backgroundColor=b6e3f4&radius=50"
alt="Аватарка участника" width="96" height="96">Стилей на текущий момент пятьдесят пять — от абстрактных пятен и идентиконов до нарисованных персонажей: lorelei, notionists, open-peeps, pixel-art, initials, bottts и другие. Список стилей отдаётся тем же API по адресу api.dicebear.com/10.x, если захочется собрать переключалку в админке. Кроме HTTP есть библиотеки для JavaScript, PHP, Python, Rust, Go, Dart и C# — с одинаковым результатом: тот же ключ на любом языке даёт ту же картинку, поэтому сервер и клиент не разъедутся.
Два ограничения, о которых лучше узнать до продакшена, а не после. Первое — лимиты публичного API: пятьдесят запросов в секунду на SVG и десять на растровые форматы, растр отдаётся максимум 256×256. Для коммерческой нагрузки авторы прямо предлагают поднять генератор у себя — библиотека ставится из npm и работает офлайн. Второе — лицензии у стилей разные: часть под CC0 (делай что хочешь), часть под CC BY 4.0 (обязательна ссылка на автора), часть просто «бесплатно для личного и коммерческого использования». Лицензия написана на странице каждого стиля, и проверить её нужно ровно один раз — перед тем как выкатить.
Personas
Конструктор от команды Draftbit, который знают в основном как весёлую веб-игрушку: крутишь кожу, причёску, растительность на лице, глаза, рот, нос, аксессуары и цвета, получаешь плоского персонажа в узнаваемом стиле и скачиваешь его в PNG или SVG. Для быстрого набора непохожих лиц в макет — отличная штука, потому что комбинаций хватает на любую команду.
Интереснее другое: сегодня это уже не только редактор, но и генератор для кода. У сервиса есть открытые эндпоинты — /api/avatar.svg отдаёт готовую картинку по query-параметрам, а /api/options перечисляет допустимые значения, чтобы не гадать, как называется нужная причёска:
<img src="https://personas.draftbit.com/api/avatar.svg?hair=Mohawk&hairColor=F2C94C"
alt="Аватарка в стиле Personas" width="96" height="96">Проект открыт под лицензией MIT, репозиторий активно поддерживается — значит, при желании его можно поднять у себя и не зависеть от чужого домена. Разница с DiceBear простая: там ключ-строка и полная случайность, здесь — осознанный подбор конкретных черт. Если задача звучит как «десять разных, но узнаваемо одинаковых по стилю персонажей для лендинга», Personas удобнее.
Avvvatars
Единственный пункт в подборке, который занимается ровно одной задачей и делает её хорошо: аккуратный плейсхолдер там, где фотографии нет. Это React-компонент, который принимает строку — почту, ник, идентификатор — и раскладывает её в комбинацию из сорока цветов и шестидесяти фигур. Никаких лиц и персонажей, чистая геометрия; в списке пользователей это выглядит опрятнее любого «серого силуэта».
import Avvvatars from 'avvvatars-react'
// value — стабильный ключ пользователя
<Avvvatars value="maria@example.com" />
// вариант с инициалами вместо фигуры
<Avvvatars value="maria@example.com" style="character" size={48} />Ставится как avvvatars-react, весит меньше сотни килобайт, лежит под MIT. Репозиторий давно не трогали — но здесь это скорее нормально: библиотека делает одну маленькую вещь и делать в ней больше особо нечего. Авторы — Nusu Alabuga и Oguz Yagiz Kara, фигуры рисовала Monika Michalczyk.
Отдельно стоит сказать про путаницу, которая гуляет по подборкам: Avvvatars регулярно записывают в Figma-файлы и дают ссылку на чужой набор. Это не Figma-библиотека, а npm-пакет, и живёт он на своём домене.
Boring Avatars
Ещё один генератор плейсхолдеров, но с другой эстетикой: шесть вариантов отрисовки — marble, beam, pixel, sunset, ring, bauhaus — и своя палитра, которую можно подменить под фирменные цвета. Результат — чистый SVG, никаких сетевых запросов: картинка считается прямо в браузере.
import Avatar from 'boring-avatars'
<Avatar
name="user-8421"
variant="beam"
size={48}
colors={['#0a2342', '#2ca58d', '#f2f7f2', '#84bc9c', '#bfd7ea']}
/>Библиотека под MIT, ставится как boring-avatars, пропсы минимальные: name как ключ генерации, variant, size, colors и square для квадратной формы вместо круга.
И важное предупреждение, ради которого этот пункт и стоит читать внимательно. У проекта раньше был бесплатный хостинг картинок — можно было просто воткнуть URL в атрибут и не ставить пакет. Этот сервис остановлен, и все старые ссылки на него больше не отдают картинку. Если наткнёшься на статью или сниппет со ссылкой на хостинг Boring Avatars — сниппет мёртв, ставь npm-пакет. Отдельный платный API по подписке у авторов есть, но бесплатный путь теперь ровно один: генерировать у себя.
Miniavs
Здесь начинается вторая половина списка — наборы, которые открываются в редакторе. Miniavs собран Magdalena Jablonka для Webpixels: набор компонентов, из которых собирается маленький плоский персонаж по пояс. Всё построено на вариантах и стилях Figma, так что смена причёски или цвета кожи — это переключение в панели справа, а не перерисовка вручную. Стиль минималистичный и не перетягивает внимание, поэтому такие аватарки хорошо ложатся в интерфейсные макеты, где главное — не они.
Лицензия — CC BY 4.0, и это не формальность: она требует видимого указания автора. То есть «бесплатно» тут означает «бесплатно с подписью», и если проект коммерческий, подпись придётся куда-то поместить.
Приятный бонус для тех, кто дочитал до этого места: тот же стиль есть в DiceBear под именем miniavs — то есть аватарки из этого набора можно не только собирать руками в редакторе, но и генерировать по ключу:
<img src="https://api.dicebear.com/10.x/miniavs/svg?seed=user-8421"
alt="Аватарка в стиле Miniavs" width="96" height="96">Avatar Illustration System
Набор Micah Lanier, построенный ровно по той же идее: библиотека компонентов, где аватарка собирается подменой частей. Отличие — в рисовке: персонажи крупнее, портретнее и заметно теплее по настроению, с характерной мягкой геометрией. Хорошо работает там, где аватарка — смысловой элемент страницы, а не служебная иконка: страницы команды, отзывы, карточки авторов.
Внутри файла всё разложено по разделам библиотеки, так что имеет смысл сначала просто пролистать структуру и понять логику именования, а уже потом собирать. И этот набор тоже доехал до DiceBear — под именем стиля micah, по имени автора:
<img src="https://api.dicebear.com/10.x/micah/svg?seed=user-8421"
alt="Аватарка в стиле Micah" width="96" height="96">Diversity Avatars
Пятьдесят два готовых портрета от иллюстратора Iryna Korshak — не конструктор, а именно набор: файл дублируется к себе, дальше остаётся выбрать подходящие. Ценность здесь в разнообразии, которое собрано осознанно: разные возраст, тип внешности, причёски, головные уборы, очки. Если задача — показать в макете реальную аудиторию, а не десять вариаций одного лица, готовый набор экономит больше времени, чем конструктор: не нужно самому следить, чтобы персонажи не получились однотипными.
Обратная сторона того же свойства: набор конечен. Пятьдесят два лица закрывают лендинг и раздел «команда», но не список из тысячи пользователей — там всё равно нужен генератор из первой половины списка.
Kyute Avatars
Компоненты и палитры для маленьких милых аватарок — тот случай, когда набор не претендует на универсальность и честно занимает свою нишу. Авторы прямо описывают сценарий: аватарки для команды, для корпоративного чата, для рассылки, для друзей. Стиль подчёркнуто несерьёзный, персонажи круглые и добрые.
Для интерфейса финансового сервиса это, конечно, мимо. А вот для внутренних инструментов, ботов, тестовых стендов и всего, что живёт внутри команды, заходит отлично: такие аватарки задают неформальный тон быстрее, чем любой текст на странице.
Drawer Avatar Library
Самый «конструкторский» набор в подборке по количеству деталей: восемьдесят четыре ассета — пять тонов кожи, двадцать семь причёсок, девять вариантов растительности на лице, девять аксессуаров, семь предметов одежды, восемь выражений глаз, тринадцать вариантов рта, три носа и семнадцать цветов фона. Всё стопроцентно векторное, отдаётся и для Sketch, и для Figma, скачивается бесплатно. Комбинаторика такая, что повторяющиеся лица придётся ещё постараться получить.
Честная оговорка: библиотека давно не обновлялась, последняя правка датирована началом двадцатых. На векторные ассеты это влияет слабо — кривые не протухают, и в актуальной Figma файл открывается нормально. Но ждать новых причёсок или дополнения набора не стоит: что есть, то есть.
Memoji by Spline
Единственный объёмный набор в списке: три с половиной десятка аватарок в стиле, который все опознают по системным стикерам на телефоне — крупные головы, мягкий свет, лёгкий 3D. Раздаётся бесплатно и сразу в трёх форматах: Figma, Adobe XD и Sketch, так что набор переживёт смену редактора в команде.
Практическая тонкость, о которой в подборках обычно молчат: объёмные аватарки на выходе тяжелее плоских. Мягкие тени и градиенты плохо ужимаются в SVG, поэтому на страницу они поедут растром — и вот тут уже важно, в каком формате и в каком размере. Про выбор между PNG, WebP и AVIF под конкретную картинку у нас есть отдельный разбор, а прогнать готовые файлы через сжатие помогут сервисы и CLI из этой подборки. Если решишь дорисовать что-то своё поверх набора, пригодятся онлайн-редакторы SVG.
Как аватарка живёт в вёрстке
Инструмент выбран, картинка получена — дальше начинается фронтенд. Четыре вещи, которые превращают «просто картинку» в аккуратный элемент интерфейса.
Ключ генерации должен быть стабильным и безопасным. Вся идея генераторов из первой половины списка держится на детерминированности: одинаковый ключ — одинаковая аватарка. Значит, ключом нельзя брать что-то меняющееся вроде отображаемого имени: сменил ник — и у человека внезапно другое лицо. И не стоит брать почту в открытом виде: она уедет в URL, а URL попадёт в логи чужого сервера, в реферер и в историю браузера. Правильный ключ — внутренний идентификатор или его хеш.
// ключ не меняется при смене ника и не раскрывает почту
const seed = user.publicId // например, 'u_8421'
const src = `https://api.dicebear.com/10.x/lorelei/svg?seed=${encodeURIComponent(seed)}`Фолбэк на инициалы. Внешний сервис может ответить пятисоткой, упереться в лимит запросов или просто отвалиться по сети. Голая иконка сломанной картинки в списке пользователей выглядит хуже, чем отсутствие аватарки вообще, поэтому запасной вариант нужен всегда — и самый дешёвый — инициалы на цветном фоне:
<span class="avatar" data-initials="МК">
<img src="https://api.dicebear.com/10.x/lorelei/svg?seed=u_8421"
alt="" width="96" height="96"
onerror="this.remove()">
</span>Смысл прост: инициалы лежат под картинкой всегда, а картинка просто исчезает, если не загрузилась. Обрати внимание на пустой alt — аватарка рядом с именем пользователя декоративна, имя и так написано текстом, и дублировать его для скринридера незачем. Если же аватарка стоит одна, без подписи, alt должен назвать человека.
Фиксация коробки. Картинка приезжает по сети, а место под неё нужно занять сразу — иначе список дёрнется в момент загрузки и мы поймаем сдвиг макета. Атрибуты width и height в разметке уже дают браузеру пропорции, а aspect-ratio с object-fit страхуют случай, когда пользователь загрузил свою фотографию произвольного размера:
.avatar img {
inline-size: 3rem;
aspect-ratio: 1;
object-fit: cover;
border-radius: 50%;
background: #eef1f4; /* видно, пока картинка едет */
}Подробный разбор самого свойства — в статье про CSS-пропорции.
Ленивая загрузка — но не для первых. В длинном списке аватарок loading="lazy" экономит десятки запросов. А вот аватарке в шапке или в первом видимом экране ленивость только вредит: браузер отложит её и покажет пустоту там, куда пользователь смотрит в первую очередь. Правило простое: всё, что ниже вьюпорта — ленивое, всё, что видно сразу — обычное.
И про чужие серверы. Каждая аватарка с внешнего домена — это запрос, который уходит из браузера пользователя наружу вместе с его IP и заголовками. Отдельная история — сервисы, где ключом служит хеш почты: сам хеш пусть и не читается глазами, но однозначно связан с конкретным адресом, а значит, это персональные данные, которые ты передаёшь третьей стороне. Если это неприемлемо — генерируй у себя: и DiceBear, и Boring Avatars, и Personas ставятся локально и работают без единого внешнего запроса.
Что выбрать под задачу
| Задача | Чем закрывать | Почему |
| Плейсхолдер для тысяч пользователей | DiceBear, Boring Avatars, Avvvatars | Детерминированно по ключу, хранить нечего |
| Нарисованные персонажи в рантайме | DiceBear, Personas | Есть API и локальная установка |
| Лица для макета в Figma | Miniavs, Avatar Illustration System, Kyute | Конструктор на компонентах и вариантах |
| Разнообразная аудитория на лендинге | Diversity Avatars | Готовый набор непохожих портретов |
| Максимум деталей под кастом | Drawer Avatar Library | Восемьдесят четыре ассета, Sketch и Figma |
| Объёмный стиль | Memoji by Spline | Единственный 3D-набор, три формата |
| Строгие требования к приватности | Любой из первой четвёрки локально | Ни одного запроса наружу |
С чего начать
Если аватарки нужны в код прямо сейчас — ставь DiceBear и подбери стиль под интерфейс: это десять минут работы и ни одной строчки в базе данных. Если нужны в макет — дублируй к себе Miniavs или Avatar Illustration System и собери пять-шесть разных персонажей, дальше пойдёт по накатанной. И в обоих случаях загляни в лицензию до того, как макет уедет в продакшен: бесплатное здесь часто означает «бесплатно с указанием автора», и узнавать об этом лучше не от автора набора.
Кстати, аватарка — едва ли не первое, на что смотрят на личном сайте. Если собираешь себе портфолио, посмотри как это делают другие разработчики, а заодно пополни закладки сервисами, которые экономят часы работы.
Комментарии (0)