# Spinner
> Cherry Spinner component - a rotating loading indicator built on the Icon component with theme-aware color.
Source: https://cherry.al/code/spinner
> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).
# Spinner
The Spinner component is a rotating loading indicator: a Lucide icon spinning once per second. It is built on the [Icon](/code/icon) component, so any Lucide glyph can spin, and it accepts Icon's props unchanged - note that, as with Icon, they are not `$`-prefixed.
```jsx
import React from "react";
import { Spinner } from "cherry-styled-components";
export default function Loading() {
return ;
}
```
The [chat kit](/code/chat)'s send button swaps its arrow for a Spinner while a reply is streaming.
## Properties
The Lucide icon to rotate. Defaults to `"LoaderCircle"`.
Stroke color. By default the spinner resolves its color from the theme (`colors.dark`) rather than inheriting, so it stays visible on either mode's surface.
Size in pixels, applied to both width and height. Defaults to Icon's 24px.
Accessible label. Without one the icon is decorative (`aria-hidden`), so add a label when the spinner is the only loading signal.
Under `prefers-reduced-motion: reduce` the rotation is disabled and the icon renders static.