Animated icons

What you get

An icon is one .tsx file with no other imports than React and Framer Motion. It draws in currentColor, on a 24 by 24 grid, and plays when the pointer is over it (loaders play all the time). It holds still for visitors who have reduced motion switched on. Browse them on the icons page.

1. Copy the file

Open an icon and press Copy the file, or fetch it from the command line (free icons only; a Pro icon needs a Pro account, so copy it from its page). Save it anywhere in your project, for example components/icons/. Then install the one dependency:

curl -s https://www.nexus-ui.com/api/icons/bell -o components/icons/bell.tsx
npm i framer-motion

2. Use it

Import it and render it like any component. Set a text colour on it, or on its parent, to change the colour.

import { BellIcon } from "@/components/icons/bell";

<button className="text-foreground" aria-label="Notifications">
  <BellIcon size={24} />
</button>

Every icon takes the same props: size, strokeWidth, className, speed (1 is the designed pace), accent (the colour of its small details) and play (true plays, false rests; left out it follows the pointer). Icons are decorative, so they carry aria-hidden="true": give the button or link around them an accessible name.

3. Play it from your own state

Hover is only the default. Drive play yourself to run an icon on click, on success, on a timer or while something loads:

const [saved, setSaved] = useState(false);

<button onClick={() => setSaved(true)}>
  <HeartIcon play={saved} accent="#ff375f" />
</button>

The status icon goes further: set state="loading" | "success" | "error" and it morphs between them.

4. Give them a look (optional)

Wrap an icon, or a whole grid, in IconMaterial for a neon, aurora or chrome finish, or for the liquid looks: mercury (flowing liquid metal), liquid (a glossy droplet that wobbles on hover) and glass (a lens with a bright rim and a red and blue fringe). They are pure SVG, so there is no canvas or WebGL to set up. It is one small file, shown at the bottom of every icon page.

5. Add a sound (optional)

Every icon has a sound scored against its animation, synthesised in the browser with no audio files. Copy the small engine once, then the score for each icon you want to hear, and call playIconScore. The sound guide has the files, the three steps, and the patterns for speed, a sound switch and touch screens.

Good to know

• Need an icon that is not in the set? Say so on the contact page.
• 75 icons are free to copy and use in personal, commercial and client projects. The other 125 are Pro: you can preview and play every one, but their code and sound come with Pro (see pricing). A Pro member can also fetch a file from the command line when signed in.
• Server Components: the files start with "use client", so import them from either kind of component.