model output
GPT-5.4

Spinners using Font Icons
A 0.76T 0.31
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8" />
5<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6<title>Rotating Refresh Icon</title>
7<style>
8  :root{
9    --bg:#1c1c1c;
10    --white:#ffffff;
11    --size:64px;
12    --stroke:8px;
13    --glow:0 0 10px rgba(255,255,255,.35), 0 0 18px rgba(255,255,255,.12);
14  }
15
16  html,body{
17    margin:0;
18    width:100%;
19    height:100%;
20    background:var(--bg);
21    overflow:hidden;
22  }
23
24  body{
25    position:relative;
26    font-family:sans-serif;
27  }
28
29  .wrap{
30    position:absolute;
31    left:50%;
32    top:68px;
33    transform:translateX(-50%);
34    width:var(--size);
35    height:var(--size);
36    filter:drop-shadow(0 0 8px rgba(255,255,255,.22));
37  }
38
39  svg{
40    width:100%;
41    height:100%;
42    display:block;
43    overflow:visible;
44    animation: spin 1.2s linear infinite;
45    transform-origin:50% 50%;
46  }
47
48  .ring{
49    fill:none;
50    stroke:var(--white);
51    stroke-width:var(--stroke);
52    stroke-linecap:round;
53    filter:drop-shadow(0 0 6px rgba(255,255,255,.35));
54  }
55
56  .head{
57    fill:var(--white);
58    filter:drop-shadow(0 0 6px rgba(255,255,255,.28));
59  }
60
61  @keyframes spin{
62    from{ transform:rotate(45deg); }
63    to{ transform:rotate(405deg); }
64  }
65</style>
66</head>
67<body>
68  <div class="wrap" aria-label="loading">
69    <svg viewBox="0 0 64 64" role="img" aria-hidden="true">
70      <!-- Open circular arrow, matching the bright white refresh icon -->
71      <path class="ring"
72        d="M 46.85 17.15
73           A 21 21 0 1 0 17.15 46.85" />
74      <!-- Arrow head tangent to the arc end -->
75      <polygon class="head"
76        points="17.15,46.85 10.8,49.2 14.8,42.2" />
77    </svg>
78  </div>
79</body>
80</html>