Document Arrow Up icon
Used to represent general file types and actions. The Document Arrow Up 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 Document Arrow Up 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 { DocumentArrowUp24Regular, DocumentArrowUp24Filled } from "@fluentui/react-icons";
export function Example() {
return <DocumentArrowUp24Regular aria-label="Document Arrow Up" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_document_arrow_up_24_regular.svg" width="24" height="24" alt="Document Arrow Up"> 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="M6.5 12C9.53757 12 12 14.4624 12 17.5C12 20.5376 9.53757 23 6.5 23C3.46243 23 1 20.5376 1 17.5C1 14.4624 3.46243 12 6.5 12ZM12.1719 2C12.7023 2 13.2118 2.21086 13.5869 2.58594L19.4141 8.41309C19.7891 8.78816 20 9.29769 20 9.82812V20C20 21.1046 19.1046 22 18 22H11.1885C11.6151 21.5556 11.9792 21.0512 12.2666 20.5H18C18.2761 20.5 18.5 20.2761 18.5 20V10H14C12.8954 10 12 9.10457 12 8V3.5H6C5.72386 3.5 5.5 3.72386 5.5 4V11.0762C4.97679 11.157 4.47417 11.3003 4 11.498V4C4 2.89543 4.89543 2 6 2H12.1719ZM6.85352 14.1465C6.65825 13.9512 6.34175 13.9512 6.14648 14.1465L3.64648 16.6465C3.45122 16.8417 3.45122 17.1583 3.64648 17.3535C3.84175 17.5488 4.15825 17.5488 4.35352 17.3535L6 15.707V20.5C6 20.7761 6.22386 21 6.5 21C6.77614 21 7 20.7761 7 20.5V15.707L8.64648 17.3535C8.84175 17.5488 9.15825 17.5488 9.35352 17.3535C9.54878 17.1583 9.54878 16.8417 9.35352 16.6465L6.85352 14.1465ZM13.5 8C13.5 8.27614 13.7239 8.5 14 8.5H17.3789L13.5 4.62109V8Z" 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_arrow_up_24_regular.svg";Details
| Name | Document Arrow Up |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_document_arrow_up_24_regular.svg |
| Filled file | ic_fluent_document_arrow_up_24_filled.svg |
| React components | DocumentArrowUp24Regular, DocumentArrowUp24Filled |
| License | MIT (© Microsoft Corporation) |