Document Save icon

Use the Document Save 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 { DocumentSave24Regular, DocumentSave24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DocumentSave24Regular aria-label="Document Save" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_document_save_24_regular.svg" width="24" height="24" alt="Document Save">

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="M18.5 20C18.5 20.275 18.276 20.5 18 20.5H13V21.5C13 21.6712 12.9828 21.8384 12.95 22H18C19.104 22 20 21.104 20 20V9.828C20 9.298 19.789 8.789 19.414 8.414L13.585 2.586C13.2194 2.22035 12.6865 2 12.172 2H6C4.896 2 4 2.896 4 4V11H5.5V4C5.5 3.725 5.724 3.5 6 3.5H12V8C12 9.104 12.896 10 14 10H18.5V20ZM13.5 4.621L17.378 8.5H14C13.724 8.5 13.5 8.275 13.5 8V4.621ZM5 12H8V14H5V12ZM2.5 12H4V14.5C4 14.7761 4.22386 15 4.5 15H8.5C8.77614 15 9 14.7761 9 14.5V12H9.37868C9.7765 12 10.158 12.158 10.4393 12.4393L11.5607 13.5607C11.842 13.842 12 14.2235 12 14.6213V21.5C12 22.3284 11.3284 23 10.5 23H10V17.5C10 17.2239 9.77614 17 9.5 17H3.5C3.22386 17 3 17.2239 3 17.5V23H2.5C1.67157 23 1 22.3284 1 21.5V13.5C1 12.6716 1.67157 12 2.5 12ZM9 18V23H4V18H9Z" 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/document_save_24_regular.svg";

Details

Keywords

paperworkfileanaloghorizontal