Save Multiple icon
Used to represent saving content. 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 Multiple icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Save Multiple 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 { SaveMultiple24Regular, SaveMultiple24Filled } from "@fluentui/react-icons";
export function Example() {
return <SaveMultiple24Regular aria-label="Save Multiple" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_save_multiple_24_regular.svg" width="24" height="24" alt="Save Multiple"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.75 18C4.23122 18 3 16.7688 3 15.25V5.75C3 4.23122 4.23122 3 5.75 3H12.7145C13.5764 3 14.4031 3.34241 15.0126 3.9519L17.0481 5.98744C17.6576 6.59693 18 7.42358 18 8.28553V15.25C18 16.7688 16.7688 18 15.25 18H5.75ZM4.5 5.75V15.25C4.5 15.9404 5.05964 16.5 5.75 16.5H6V13.25C6 12.0074 7.00736 11 8.25 11H12.75C13.9926 11 15 12.0074 15 13.25V16.5H15.25C15.9404 16.5 16.5 15.9404 16.5 15.25V8.28553C16.5 7.8214 16.3156 7.37629 15.9874 7.0481L14 5.06066V6.25C14 7.49264 12.9926 8.5 11.75 8.5H9.25C8.00736 8.5 7 7.49264 7 6.25V4.5H5.75C5.05964 4.5 4.5 5.05964 4.5 5.75ZM13.5 16.5V13.25C13.5 12.8358 13.1642 12.5 12.75 12.5H8.25C7.83579 12.5 7.5 12.8358 7.5 13.25V16.5H13.5ZM8.5 6.25C8.5 6.66421 8.83579 7 9.25 7H11.75C12.1642 7 12.5 6.66421 12.5 6.25V4.5H8.5V6.25ZM10.7498 21.0001C9.38363 21.0001 8.15219 20.4234 7.28564 19.5001H16.2498C18.0447 19.5001 19.4998 18.045 19.4998 16.2501V8.43945L20.0479 8.98755C20.6574 9.59704 20.9998 10.4237 20.9998 11.2856V16.2501C20.9998 18.8735 18.8731 21.0001 16.2498 21.0001H10.7498Z" fill="currentColor"/></svg>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/save_multiple_24_regular.svg";Details
| Name | Save Multiple |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_save_multiple_24_regular.svg |
| Filled file | ic_fluent_save_multiple_24_filled.svg |
| React components | SaveMultiple24Regular, SaveMultiple24Filled |
| License | MIT (© Microsoft Corporation) |