Flutter Avatar Kit

133 SVG avatars across 8 styles — scroll each row sideways to preview every face, then use the snippets below in your app.

Tip: scroll each row horizontally to browse every SVG. Hover a face for its filename and list index.

Vibrant | AvatarType.vibrant | 27 avatars

Vibrant v1 Vibrant v2 Vibrant v3 Vibrant v4 Vibrant v5 Vibrant v6 Vibrant v7 Vibrant v8 Vibrant v9 Vibrant v10 Vibrant v11 Vibrant v12 Vibrant v13 Vibrant v14 Vibrant v15 Vibrant v16 Vibrant v17 Vibrant v18 Vibrant v19 Vibrant v20 Vibrant v21 Vibrant v22 Vibrant v23 Vibrant v24 Vibrant v25 Vibrant v26 Vibrant v27

3D | AvatarType.d3 | 5 avatars

3D d1 3D d2 3D d3 3D d4 3D d5

Bluey | AvatarType.bluey | 10 avatars

Bluey b1 Bluey b2 Bluey b3 Bluey b4 Bluey b5 Bluey b6 Bluey b7 Bluey b8 Bluey b9 Bluey b10

Memo | AvatarType.memo | 35 avatars

Memo m1 Memo m2 Memo m3 Memo m4 Memo m5 Memo m6 Memo m7 Memo m8 Memo m9 Memo m10 Memo m11 Memo m12 Memo m13 Memo m14 Memo m15 Memo m16 Memo m17 Memo m18 Memo m19 Memo m20 Memo m21 Memo m22 Memo m23 Memo m24 Memo m25 Memo m26 Memo m27 Memo m28 Memo m29 Memo m30 Memo m31 Memo m32 Memo m33 Memo m34 Memo m35

Notion | AvatarType.notion | 15 avatars

Notion n1 Notion n2 Notion n3 Notion n4 Notion n5 Notion n6 Notion n7 Notion n8 Notion n9 Notion n10 Notion n11 Notion n12 Notion n13 Notion n14 Notion n15

Teams | AvatarType.teams | 9 avatars

Teams t1 Teams t2 Teams t3 Teams t4 Teams t5 Teams t6 Teams t7 Teams t8 Teams t9

Toon | AvatarType.toon | 10 avatars

Toon to1 Toon to2 Toon to3 Toon to4 Toon to5 Toon to6 Toon to7 Toon to8 Toon to9 Toon to10

Upstream | AvatarType.upstream | 22 avatars

Upstream u1 Upstream u2 Upstream u3 Upstream u4 Upstream u5 Upstream u6 Upstream u7 Upstream u8 Upstream u9 Upstream u10 Upstream u11 Upstream u12 Upstream u13 Upstream u14 Upstream u15 Upstream u16 Upstream u17 Upstream u18 Upstream u19 Upstream u20 Upstream u21 Upstream u22

A Flutter UI kit for category-based SVG avatars: pick a style, address art by index, optionally show an animated ring, and build pickers with AvatarGrid. Assets ship with the package under assets/<category>/.

This repo sets homepage / repository in pubspec.yaml for pub.dev and GitHub navigation.

Features

  • Eight visual categories with many SVGs each (see gallery above).
  • AvatarWidget — size, shape (circle / rounded / square), selection border, optional gradient ring, random mode.
  • AvatarGrid — configurable columns, padding, scroll physics; onSelect and optional onLongPress callbacks (no forced SnackBar in the library).
  • AvatarCard — theme-aware surface with optional tap target.
  • AvatarAssets — path helpers, counts, and random selection without mutating shared lists.

Installation

From Pub (after you publish), or from a path while developing:

dependencies:
  flutter_avatar_kit: ^1.0.1

Path dependency:

dependencies:
  flutter_avatar_kit:
    path: ../flutter_avatar_kit

Run flutter pub get. You do not need to duplicate assets/ entries in your pubspec.yaml; they ship with this package.

Quick usage

import 'package:flutter_avatar_kit/flutter_avatar_kit.dart';

AvatarWidget(
  type: AvatarType.teams,
  index: 0,
  size: 48,
  shape: AvatarShape.circle,
  onTap: () {},
)

AvatarWidget(
  type: AvatarType.vibrant,
  isRandom: true,
  showRing: true,
)

AvatarGrid(
  type: AvatarType.memo,
  crossAxisCount: 5,
  padding: const EdgeInsets.all(12),
  onSelect: (index, asset) {},
  onLongPress: (index, asset) {},
)

AvatarCard(
  onTap: () {},
  child: AvatarWidget(type: AvatarType.toon, index: 2),
)

Paths resolve as assets/<enumName>/<id>.svg, e.g. assets/teams/t1.svg.

Categories (counts)

AvatarType Folder Avatars
vibrant assets/vibrant/ 27
d3 assets/d3/ 5
bluey assets/bluey/ 10
memo assets/memo/ 35
notion assets/notion/ 15
teams assets/teams/ 9
toon assets/toon/ 10
upstream assets/upstream/ 22

Indices are 0 … count - 1 in the same order as the gallery rows.

Interactive example

From the package root:

cd example
flutter pub get
flutter run

Try category chips, hero preview (tap card to cycle index), ring and random toggles, and the scrollable grid with tap / long-press feedback.

API overview

Symbol Role
AvatarType Enum of bundled categories.
AvatarAssets.getAsset / getRandomAsset / count Paths and inventory.
AvatarWidget Single SVG avatar.
AvatarGrid Picker grid with selection state.
AvatarCard Framed child with optional onTap.
AvatarShape Clip shape for AvatarWidget.
AnimatedGradientRing Rotating sweep gradient (used when showRing: true).

After adding or renaming SVGs, update counts in lib/src/avatar_assets.dart, then run:

python tool/generate_readme_gallery.py
python tool/assemble_readme.py

License

See LICENSE.

Libraries

flutter_avatar_kit