Back to icons
IconDownload & UploadHas a state
Download icon
The Download icon is an animated React icon from ReactFrame: a 24×24 drawing with a 1.5px stroke that moves when its button or card is hovered, and switches to a “Done” state with the active prop. Copy it as SVG or JSX, download the .svg file, or install it with the shadcn CLI. It's free.
Also known assaveimportexportarrownavigationflowmovementroutepathsaved
16
20
24
32
48
Hover to play
Install
Copied!
npx shadcn@latest add @reactframe/download-iconUse it
import { useState } from "react";
import { motion } from "motion/react";
import { DownloadIcon } from "@/components/download-icon";
export function Example() {
const [on, setOn] = useState(false);
// Hovering the button plays the icon; `active` switches it to its "Done" state.
return (
<motion.button initial="rest" whileHover="hover" onClick={() => setOn(!on)}>
<DownloadIcon size={20} active={on} />
Download
</motion.button>
);
}Details
- Component
- DownloadIcon
- Category
- Download & Upload
- Canvas
- 24 × 24, 2px padding
- Stroke
- 1.5 (adjustable), round caps and joins
- Styles
- Stroke, duotone, static, pixel
- State
- “Done” via the active prop
- Dependencies
- motion