Save Sync 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 Sync 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 Sync 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 { SaveSync24Regular, SaveSync24Filled } from "@fluentui/react-icons";
export function Example() {
return <SaveSync24Regular aria-label="Save Sync" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_save_sync_24_regular.svg" width="24" height="24" alt="Save Sync"> 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="M17.5 12C20.5376 12 23 14.4624 23 17.5C23 20.5376 20.5376 23 17.5 23C14.4624 23 12 20.5376 12 17.5C12 14.4624 14.4624 12 17.5 12ZM15.7148 3C16.5767 3.0001 17.4033 3.34274 18.0127 3.95215L20.0479 5.9873C20.6573 6.59671 20.9999 7.42334 21 8.28516V12.0244C20.5365 11.7276 20.0338 11.4869 19.5 11.3145V8.28516C19.4999 7.82116 19.3154 7.37595 18.9873 7.04785L16.9521 5.0127C16.692 4.75259 16.3582 4.58268 16 4.52344V7.25C16 8.49264 14.9926 9.5 13.75 9.5H9.25C8.00736 9.5 7 8.49264 7 7.25V4.5H5.75C5.05964 4.5 4.5 5.05964 4.5 5.75V18.25C4.5 18.9404 5.05964 19.5 5.75 19.5H6V14.25C6 13.0074 7.00736 12 8.25 12H14.0381C13.4019 12.4013 12.8408 12.9095 12.3789 13.5H8.25C7.83579 13.5 7.5 13.8358 7.5 14.25V19.5H11.3145C11.4869 20.0338 11.7276 20.5365 12.0244 21H5.75C4.23122 21 3 19.7688 3 18.25V5.75C3 4.23122 4.23122 3 5.75 3H15.7148ZM14.5 18C14.2239 18 14 18.2239 14 18.5V20.5C14 20.7761 14.2239 21 14.5 21C14.7761 21 15 20.7761 15 20.5V19.9492C15.6349 20.5971 16.5203 21 17.5 21C18.5731 21 19.5336 20.5162 20.1748 19.7568C20.3528 19.546 20.3268 19.231 20.1162 19.0527C19.9053 18.8747 19.5893 18.9006 19.4111 19.1113C18.9518 19.6553 18.2663 20 17.5 20C16.6827 20 15.9567 19.6079 15.5 19H16.5C16.7761 19 17 18.7761 17 18.5C17 18.2239 16.7761 18 16.5 18H14.5ZM20.5 14C20.2239 14 20 14.2239 20 14.5V15.0508C19.3651 14.4029 18.4797 14 17.5 14C16.3324 14 15.2981 14.5721 14.6631 15.4492C14.5012 15.6729 14.5517 15.9855 14.7754 16.1475C14.9991 16.3093 15.3117 16.2598 15.4736 16.0361C15.9287 15.4075 16.6666 15 17.5 15C18.3173 15 19.0433 15.3921 19.5 16H18.5C18.2239 16 18 16.2239 18 16.5C18 16.7761 18.2239 17 18.5 17H20.5C20.7761 17 21 16.7761 21 16.5V14.5C21 14.2239 20.7761 14 20.5 14ZM8.5 7.25C8.5 7.66421 8.83579 8 9.25 8H13.75C14.1642 8 14.5 7.66421 14.5 7.25V4.5H8.5V7.25Z" 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_sync_24_regular.svg";Details
| Name | Save Sync |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_save_sync_24_regular.svg |
| Filled file | ic_fluent_save_sync_24_filled.svg |
| React components | SaveSync24Regular, SaveSync24Filled |
| License | MIT (© Microsoft Corporation) |