dot/matrix← all loaders
CrosshairA center target pulses while four cardinal arms rotate around it.
60spinner

Crosshair

A center target pulses while four cardinal arms rotate around it.

slug
icon-60
duration
2000ms
iteration
infinite
lit cells
5 / 25
size
1.60 KB
easing
cubic-bezier(0.25, 1, 0.5, 1)

used at typical sizes

CrosshairA center target pulses while four cardinal arms rotate around it.
16px
CrosshairA center target pulses while four cardinal arms rotate around it.
24px
CrosshairA center target pulses while four cardinal arms rotate around it.
32px
CrosshairA center target pulses while four cardinal arms rotate around it.
48px
CrosshairA center target pulses while four cardinal arms rotate around it.
72px

react

tsx
<DotMatrixIcon iconIndex={59} size={48} />

standalone svg

svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" role="img" aria-label="Crosshair"><title>Crosshair</title><desc>A center target pulses while four cardinal arms rotate around it.</desc><defs><circle id="b" r="2.4" fill="#ffffff" opacity="0.07"/><circle id="l" r="3.1"/></defs><style>.l{fill:#ffffff;opacity:0;animation:icon-60-k 2000ms cubic-bezier(0.25, 1, 0.5, 1) infinite both;}@keyframes icon-60-k{0%{opacity:0;}8%{opacity:1;}36%{opacity:0.05;}100%{opacity:0;}}@media (prefers-reduced-motion:reduce){.l{animation:none;opacity:0.45;}}.d12,.d22{animation-delay:0ms;}.d21{animation-delay:1500ms;}.d23{animation-delay:500ms;}.d32{animation-delay:1000ms;}</style><use href="#b" x="6" y="6"/><use href="#b" x="17" y="6"/><use href="#b" x="28" y="6"/><use href="#b" x="39" y="6"/><use href="#b" x="50" y="6"/><use href="#b" x="6" y="17"/><use href="#b" x="17" y="17"/><use href="#b" x="28" y="17"/><use href="#b" x="39" y="17"/><use href="#b" x="50" y="17"/><use href="#b" x="6" y="28"/><use href="#b" x="17" y="28"/><use href="#b" x="28" y="28"/><use href="#b" x="39" y="28"/><use href="#b" x="50" y="28"/><use href="#b" x="6" y="39"/><use href="#b" x="17" y="39"/><use href="#b" x="28" y="39"/><use href="#b" x="39" y="39"/><use href="#b" x="50" y="39"/><use href="#b" x="6" y="50"/><use href="#b" x="17" y="50"/><use href="#b" x="28" y="50"/><use href="#b" x="39" y="50"/><use href="#b" x="50" y="50"/><use class="l d12" href="#l" x="28" y="17"/><use class="l d21" href="#l" x="17" y="28"/><use class="l d22" href="#l" x="28" y="28"/><use class="l d23" href="#l" x="39" y="28"/><use class="l d32" href="#l" x="28" y="39"/></svg>