Save Image icon
Used to represent saving image data. Before using review if necessary. Floppy disc is old concept. Try a more dynamic save experience with motion and a checkmark or other UI. The Save Image icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles on a 20 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Every size and style
Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.
Regular, 20 px
ic_fluent_save_image_20_regular.svg
Save Image icon in React
npm install @fluentui/react-icons
import { SaveImage20Regular } from "@fluentui/react-icons";
export function Example() {
return <SaveImage20Regular aria-label="Save Image" />;
}Use the Save Image icon in React
Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.
npm install @fluentui/react-icons
import { SaveImage20Regular, SaveImage20Filled } from "@fluentui/react-icons";
export function Example() {
return <SaveImage20Regular aria-label="Save Image" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_save_image_20_regular.svg" width="20" height="20" alt="Save Image"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M17 6.13v2.9L16.5 9H16V6.13a1 1 0 0 0-.29-.72L13.6 3.3A1 1 0 0 0 13 3V5.5a1.5 1.5 0 0 1-.44 1.06q-.21.2-.48.32T11.5 7h-4a1.5 1.5 0 0 1-1.05-.44 2 2 0 0 1-.33-.48A1.3 1.3 0 0 1 6 5.5V3H5a1 1 0 0 0-.7.29q-.15.15-.22.32A1 1 0 0 0 4 4v10q0 .2.08.4.08.16.2.31.14.15.32.21.2.08.4.08v-4.5a1.5 1.5 0 0 1 .44-1.05q.21-.21.48-.33Q6.2 9 6.5 9h6c-.96 0-1.82.38-2.45 1H6.5a.5.5 0 0 0-.5.5V15h3v1H5q-.4 0-.76-.16a2 2 0 0 1-.64-.42 2 2 0 0 1-.6-1.38V4q0-.4.16-.76.15-.36.42-.64A2 2 0 0 1 4.96 2h7.92q.4 0 .76.15.38.15.65.44L16.4 4.7q.29.28.43.65.16.36.16.77M7 3v2.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5V3zm3 9.5a2.5 2.5 0 0 1 2.5-2.5h4a2.5 2.5 0 0 1 2.5 2.5v4q-.01.77-.41 1.38l-3.03-3.03a1.5 1.5 0 0 0-2.12 0l-3.03 3.03q-.4-.6-.41-1.38zm7 .25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0m-5.88 5.84q.6.4 1.38.41h4q.77-.01 1.38-.41l-3.03-3.03a.5.5 0 0 0-.7 0z"/></svg>Details
| Name | Save Image |
|---|---|
| Styles | Regular (outlined), Filled |
| Sizes | 20 px |
| Regular (outlined) file | ic_fluent_save_image_20_regular.svg |
| Filled file | ic_fluent_save_image_20_filled.svg |
| React (Regular) | SaveImage20Regular |
| React (Filled) | SaveImage20Filled |
| License | MIT (© Microsoft Corporation) |