Tools/Dot Matrix Icons
Back to all tools
Agent Mag tool84 loadersUI & Design

Dot Matrix Icons

Animated 5x5 SVG loaders for agent states, queues, retrieval, and product UI. Copy SVG or install the React bundle.

Usage guideOpen source

The set

84 visible / 84 total

tint
speed1x

Click a tile to copy SVG. Press c when a tile is focused.

01

Pulse Rings

icon-01

Concentric dots expand from center.

spinner
02

Corner Orbit

icon-02

Perimeter dots run around the square.

spinner
03

Spiral In

icon-03

A spiral moves into the center.

spinner
04

Half Moon

icon-04

A crescent path rotates around the grid.

spinner
05

Pinwheel

icon-05

Four directional arms rotating around a fixed center.

spinner
06

Radar Sweep

icon-06

A sweep line crossing a circular dot field.

spinner
07

Cross Expand

icon-07

A cross-shaped loader that expands through the center.

spinner
08

Diamond Loop

icon-08

A diamond path chases around the grid.

spinner
09

Box Breathe

icon-09

A square frame pulses in place.

spinner
10

Inner Ring

icon-10

A compact ring for small slots.

spinner
11

Satellite

icon-11

A center anchor with satellites pulsing around it.

spinner
12

Compass

icon-12

Cardinal points alternate through center.

spinner
13

Coil

icon-13

An offset coil loops through the matrix.

spinner
14

Aperture

icon-14

Shutter dots rotate around the center.

spinner
15

Four Beat

icon-15

Four corners pulse around a center dot.

spinner
16

Hourglass

icon-16

An hourglass path narrows at center.

spinner
17

Offset Ring

icon-17

A ring with an off-center beat.

spinner
18

Loading Core

icon-18

Center core with a rotating shell.

spinner
19

Split Orbit

icon-19

Two arcs chasing each other across the matrix.

spinner
20

Soft Spinner

icon-20

Low-contrast spinner for background slots.

spinner
21

Neon Drift

icon-21

A diagonal drift across the 5x5 field.

spinner
22

Twin Orbit

icon-22

Two outer arcs chasing in opposite corners.

spinner
23

Core Rotor

icon-23

A single blade rotating around the center.

spinner
24

Mobius Run

icon-24

Outer-ring motion with a center crossover.

spinner
25

Column Scan

icon-25

A vertical column scans left to right.

progress
26

Row Scan

icon-26

A horizontal rail moves across center.

progress
27

Loading Bars

icon-27

Uneven bars pulse through the grid.

progress
28

Meter Fill

icon-28

A block meter fills left to right.

progress
29

Diagonal Scan

icon-29

A diagonal sweep for parsing work.

progress
30

Reverse Diagonal

icon-30

The same sweep in reverse.

progress
31

Pipeline

icon-31

Three lanes advance as a queue.

progress
32

Stair Step

icon-32

Stepped progress climbing across the matrix.

progress
33

Download

icon-33

A down arrow for fetch states.

progress
34

Upload

icon-34

An up arrow for publish states.

progress
35

Sync Lanes

icon-35

Mirrored lanes sync across the grid.

progress
36

Stream

icon-36

A trace moves through the output path.

progress
37

Chunking

icon-37

Blocks advance through ingestion.

progress
38

Token Flow

icon-38

Alternating dots for token output.

progress
39

Build Step

icon-39

Layers move like a build pipeline.

progress
40

Indexing

icon-40

Comb columns for indexing work.

progress
41

Merge

icon-41

Two paths converging into a central lane.

progress
42

Branch

icon-42

A central lane branching into two outputs.

progress
43

Queue Rail

icon-43

Queued work advances one cell at a time.

progress
44

Check Run

icon-44

A checkmark draws across the grid.

progress
45

Pulse Ladder

icon-45

A stepped route that climbs through the grid.

progress
46

Flux Columns

icon-46

Alternating columns for sync and transfer states.

progress
47

CRT Glide

icon-47

A scanline that moves down the matrix.

progress
48

Sound Bars

icon-48

Equalizer bars for live or streaming states.

progress
49

Sparkle

icon-49

Sparse points twinkle across the field.

ambient
50

Rain

icon-50

Vertical drops fall through the grid.

ambient
51

Heartbeat

icon-51

A center pulse for live states.

ambient
52

Constellation

icon-52

Scattered points form a loose map.

ambient
53

Noise Field

icon-53

Irregular dots flicker as background work.

ambient
54

Breathing Grid

icon-54

The full matrix pulses together.

ambient
55

Soft Wave

icon-55

A wave crosses the center row.

ambient
56

Glow Core

icon-56

Center glow for thinking states.

ambient
57

Signal Field

icon-57

Broadcast rings move from center.

ambient
58

Mesh

icon-58

Alternating nodes form a mesh.

ambient
59

Nebula

icon-59

A clustered cloud shifts around center.

ambient
60

Scan Dust

icon-60

Sparse dots caught in a sweep.

ambient
61

Typing

icon-61

A three-beat typing indicator in matrix form.

ambient
62

Listening

icon-62

Center pulse for voice or chat.

ambient
63

Idle

icon-63

Two corners and center stay low.

ambient
64

Wake

icon-64

Dots rise into an activation pulse.

ambient
65

Focus

icon-65

Target dots frame the center.

ambient
66

Low Power

icon-66

Dim corners with a small center pulse.

ambient
67

Pulse Line

icon-67

An ambient pulse traveling along a single rail.

ambient
68

Star Map

icon-68

Sparse points for background loading.

ambient
69

Prism Bloom

icon-69

A symmetric bloom from center to edge.

ambient
70

Helix Glow

icon-70

Two strands crossing through the center.

ambient
71

Halo Drift

icon-71

A hollow ring with a drifting edge.

ambient
72

Plasma Veil

icon-72

Crossed dots with a soft center pulse.

ambient
73

Agent Thinking

icon-73

Reasoning dots pulse around center.

agent
74

Tool Call

icon-74

Bracketed dots mark an external call.

agent
75

Memory Write

icon-75

Stacked lanes for memory writes.

agent
76

Retrieval Scan

icon-76

Crosshair dots scan for retrieval.

agent
77

Handoff

icon-77

Two rails passing control between agents.

agent
78

Multi Agent

icon-78

Distributed nodes pulse as a mesh.

agent
79

Verified

icon-79

Checkmark dots for a verified state.

status
80

Blocked

icon-80

A hard stop marker for blocked runs.

status
81

Queued

icon-81

Queue dots for pending work.

status
82

Running

icon-82

Directional dots for active jobs.

status
83

Degraded

icon-83

Broken signal dots for warnings.

status
84

Complete

icon-84

A filled mark for finished runs.

status

Install, copy, use

Dot Matrix is a local UI bundle. Install it once, import the CSS, then use the icons where a job is actually pending.

Use SVG when you need a portable asset.

Use React when the state, tint, or speed should come from your app.

Keep one moving indicator per region. Pair motion with a real label.

Install

npx agentmag add tool dotmatrix-icons

Import CSS

import "@/components/dotmatrix/dotmatrix.css"

Manual SVG

1. Pick an icon.
2. Tune tint, speed, and pause state.
3. Click the tile to copy SVG.
4. Paste it inline or save it as an asset.

React usage

import { DotMatrixIcon } from "@/components/dotmatrix"

export function SaveButton({ saving }: { saving: boolean }) {
  return (
    <button type="button" disabled={saving} className="inline-flex items-center gap-2">
      {saving ? <DotMatrixIcon pattern="radar-sweep" size={18} aria-label="Saving" /> : null}
      <span>{saving ? "Saving" : "Save"}</span>
    </button>
  )
}
copied

Related on Agent Mag