# Hover Icons
> Stroke icons that act out their meaning on hover or keyboard focus: the bell rings, the bin lifts its lid, the plane flies off and back, the cog turns, refresh spins, the padlock opens. CSS only.
SVG & Drawing · svg, icon, hover, animated icons, icon button, bell, trash, send, settings, refresh, lock, css only · HTML and CSS only · no dependencies · updated 2026-11-04
Demo: https://kodza.dev/components/hover-icons/
Source on GitHub: https://github.com/kodza-dev/kodza/tree/main/components/hover-icons
## Files
The code below, served as files: byte for byte what the Kodza site copies (the CSS includes its theme guard).
- [`kodza-hover-icons.css`](https://kodza.dev/registry/hover-icons/kodza-hover-icons.css) · 12.4 KB
- [`kodza-hover-icons.html`](https://kodza.dev/registry/hover-icons/kodza-hover-icons.html) · 2.7 KB · the markup, to adapt and paste into your page
**Can you run shell commands? Download the CSS, don't retype it.** Retyping costs thousands of tokens and can drop or change lines of the CSS. Put the files where your stack expects them (Use it says where: change the `-o` paths):
```bash
curl -fsSL --create-dirs -o kodza/kodza-hover-icons.css https://kodza.dev/registry/hover-icons/kodza-hover-icons.css
```
Then load the file from your page as Use it shows, instead of pasting the content. The HTML is the part you adapt (text, links, modifiers): paste it from the Code section. Copy the CSS from the Code section only if you can't run commands, exactly as it is. (Windows PowerShell: `curl.exe`.)
## API
- Root: `.kodza-hover-icons`
- Variables (set them on the root element itself: it declares its own defaults):
- `--kz-hover-icons-height: 40px`
- `--kz-hover-icons-icon: 18px`
- `--kz-hover-icons-stroke: 1.75px` — in icon units, 24 across
- `--kz-hover-icons-ink: #0a0a0a`
- `--kz-hover-icons-on-ink: #ffffff` — text and icon of the solid pill
- `--kz-hover-icons-bg: #ffffff`
- `--kz-hover-icons-line: rgba(10, 10, 10, 0.12)`
- `--kz-hover-icons-line-hover: rgba(10, 10, 10, 0.28)`
- `--kz-hover-icons-solid-hover: #2a2a2a`
- `--kz-hover-icons-duration: 0.5s` — cog, lid and padlock; the bell, the plane and the arrows take longer
- `--kz-hover-icons-ease: cubic-bezier(0.34, 1.45, 0.64, 1)` — a small overshoot, so the part clicks into place
- Modifiers: `.kodza-hover-icons--icon`, `.kodza-hover-icons--solid`
## Dark mode
The values Kodza uses on a dark background (`#0a0a0a`). For a page that follows the system theme, add them after the component's CSS:
```css
@media (prefers-color-scheme: dark) {
.kodza-hover-icons {
--kz-hover-icons-ink: #f2f2f0;
--kz-hover-icons-on-ink: #0a0a0a;
--kz-hover-icons-bg: #161616;
--kz-hover-icons-line: rgba(255, 255, 255, 0.12);
--kz-hover-icons-line-hover: rgba(255, 255, 255, 0.26);
--kz-hover-icons-solid-hover: #ffffff;
}
}
```
A site with its own theme switch puts the same rules under its dark selector instead (`[data-theme="dark"] .kodza-hover-icons { … }`); a single dark section, under that section's class.
## Use it
### Plain HTML page
- CSS: `kodza/kodza-hover-icons.css` next to the page (the Files commands as they are), linked in ``: ``. Without a shell, paste it in a `