The Phosphor floppy disk icon depicts a classic storage medium, commonly used in user interfaces to represent the action of saving data.
Common uses
- Save button in a text editor
- Download button for a file
- Data storage status indicator
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { FloppyDisk } from '@phosphor-icons/react';
<FloppyDisk size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<FloppyDisk size={24} />thin
<FloppyDisk size={24} weight="thin" />light
<FloppyDisk size={24} weight="light" />bold
<FloppyDisk size={24} weight="bold" />fill
<FloppyDisk size={24} weight="fill" />duotone
<FloppyDisk size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- office
- Keywords
- diskettedirectorydirectoriesfoldersdocumentsfilessavewriteofficeeditorsystemfloppydisksave icon
FAQ
- What does the floppy disk icon represent?
- It represents a floppy disk, a historical data storage device. In UI, it's universally understood as an icon for saving files or data.
- How do I use the floppy disk icon in React?
- You can import and use it directly from the Phosphor library: `import { FloppyDisk } from '@phosphor-icons/react'`. Then render it as a React component: `<FloppyDisk />`.
- What is the license for the Phosphor floppy disk icon?
- The Phosphor icon library, including the floppy disk icon, is available under the MIT license.
Related icons
The same idea in other libraries, and near matches in Phosphor.
Looking for something else? Search Phosphor and 4 more libraries by description →
The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →