Gentleface › Files & folders › file-export

file-export icon

File export: export file, export document. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M12.778 5.385C12.926 5.742 13 6.114 13 6.5L13 7L12 7L12 6.5C12 6.329 11.978 6.162 11.934 6L10 6C9.746 6 9.5 5.953 9.264 5.86C9.007 5.758 8.781 5.609 8.586 5.414C8.391 5.219 8.242 4.993 8.14 4.736C8.047 4.5 8 4.254 8 4L8 2.066C7.838 2.022 7.671 2 7.5 2L5 2C4.724 2 4.488 2.098 4.293 2.293C4.098 2.488 4 2.724 4 3L4 13C4 13.276 4.098 13.512 4.293 13.707C4.488 13.902 4.724 14 5 14L10 14L10 14.399C9.998 14.432 9.997 14.466 9.997 14.5C9.997 14.534 9.998 14.568 10 14.601L10 15L5 15C4.746 15 4.5 14.953 4.264 14.86C4.007 14.758 3.781 14.609 3.586 14.414C3.391 14.219 3.242 13.993 3.14 13.736C3.047 13.5 3 13.254 3 13L3 3C3 2.746 3.047 2.5 3.14 2.264C3.242 2.007 3.391 1.781 3.586 1.586C3.781 1.391 4.007 1.242 4.264 1.14C4.5 1.047 4.746 1 5 1L7.5 1C7.886 1 8.258 1.074 8.615 1.222C8.972 1.37 9.287 1.58 9.561 1.854L12.146 4.439C12.42 4.713 12.63 5.028 12.778 5.385ZM13 9.292L13 9.293L14.854 11.147L14.854 11.147L14.86 11.153C14.942 11.237 14.988 11.334 15 11.443C15.002 11.462 15.003 11.481 15.003 11.5C15.003 11.519 15.002 11.538 15 11.557C14.988 11.666 14.942 11.763 14.86 11.847L14.854 11.853L14.854 11.853L12.764 13.943C12.764 13.944 12.763 13.944 12.763 13.945L11.945 14.763C11.944 14.763 11.944 14.764 11.943 14.764C11.906 14.79 11.866 14.809 11.823 14.823C11.794 14.836 11.766 14.848 11.736 14.86C11.603 14.912 11.467 14.95 11.329 14.973C11.262 14.949 11.201 14.909 11.146 14.854C11.047 14.754 10.997 14.636 10.997 14.5C10.997 14.364 11.047 14.246 11.146 14.146L11.353 13.939L11.355 13.938L11.938 13.355L11.939 13.354L13 12.293L13.062 12.231L13.293 12L6.5 12C6.359 12 6.241 11.952 6.144 11.856C6.048 11.759 6 11.641 6 11.5C6 11.359 6.048 11.241 6.144 11.144C6.241 11.048 6.359 11 6.5 11L13.293 11L13.062 10.769L13 10.707L12 9.708L12 9.707L11.146 8.854C11.097 8.805 11.06 8.751 11.036 8.693C11.01 8.633 10.997 8.569 10.997 8.5C10.997 8.431 11.01 8.367 11.036 8.307C11.06 8.249 11.097 8.195 11.146 8.146C11.195 8.097 11.249 8.06 11.307 8.036C11.367 8.01 11.431 7.997 11.5 7.997C11.569 7.997 11.633 8.01 11.693 8.036C11.751 8.06 11.805 8.097 11.854 8.146L12 8.293L12 8.292L13 9.292ZM9 2.707L9 4C9 4.276 9.098 4.512 9.293 4.707C9.488 4.902 9.724 5 10 5L11.293 5L9 2.707Z"/></svg>

React

// Gentleface "file-export" (line-round), MIT. https://gentleface.com/icons/file-export
import type { SVGProps } from 'react';

export function FileExportIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M12.778 5.385C12.926 5.742 13 6.114 13 6.5L13 7L12 7L12 6.5C12 6.329 11.978 6.162 11.934 6L10 6C9.746 6 9.5 5.953 9.264 5.86C9.007 5.758 8.781 5.609 8.586 5.414C8.391 5.219 8.242 4.993 8.14 4.736C8.047 4.5 8 4.254 8 4L8 2.066C7.838 2.022 7.671 2 7.5 2L5 2C4.724 2 4.488 2.098 4.293 2.293C4.098 2.488 4 2.724 4 3L4 13C4 13.276 4.098 13.512 4.293 13.707C4.488 13.902 4.724 14 5 14L10 14L10 14.399C9.998 14.432 9.997 14.466 9.997 14.5C9.997 14.534 9.998 14.568 10 14.601L10 15L5 15C4.746 15 4.5 14.953 4.264 14.86C4.007 14.758 3.781 14.609 3.586 14.414C3.391 14.219 3.242 13.993 3.14 13.736C3.047 13.5 3 13.254 3 13L3 3C3 2.746 3.047 2.5 3.14 2.264C3.242 2.007 3.391 1.781 3.586 1.586C3.781 1.391 4.007 1.242 4.264 1.14C4.5 1.047 4.746 1 5 1L7.5 1C7.886 1 8.258 1.074 8.615 1.222C8.972 1.37 9.287 1.58 9.561 1.854L12.146 4.439C12.42 4.713 12.63 5.028 12.778 5.385ZM13 9.292L13 9.293L14.854 11.147L14.854 11.147L14.86 11.153C14.942 11.237 14.988 11.334 15 11.443C15.002 11.462 15.003 11.481 15.003 11.5C15.003 11.519 15.002 11.538 15 11.557C14.988 11.666 14.942 11.763 14.86 11.847L14.854 11.853L14.854 11.853L12.764 13.943C12.764 13.944 12.763 13.944 12.763 13.945L11.945 14.763C11.944 14.763 11.944 14.764 11.943 14.764C11.906 14.79 11.866 14.809 11.823 14.823C11.794 14.836 11.766 14.848 11.736 14.86C11.603 14.912 11.467 14.95 11.329 14.973C11.262 14.949 11.201 14.909 11.146 14.854C11.047 14.754 10.997 14.636 10.997 14.5C10.997 14.364 11.047 14.246 11.146 14.146L11.353 13.939L11.355 13.938L11.938 13.355L11.939 13.354L13 12.293L13.062 12.231L13.293 12L6.5 12C6.359 12 6.241 11.952 6.144 11.856C6.048 11.759 6 11.641 6 11.5C6 11.359 6.048 11.241 6.144 11.144C6.241 11.048 6.359 11 6.5 11L13.293 11L13.062 10.769L13 10.707L12 9.708L12 9.707L11.146 8.854C11.097 8.805 11.06 8.751 11.036 8.693C11.01 8.633 10.997 8.569 10.997 8.5C10.997 8.431 11.01 8.367 11.036 8.307C11.06 8.249 11.097 8.195 11.146 8.146C11.195 8.097 11.249 8.06 11.307 8.036C11.367 8.01 11.431 7.997 11.5 7.997C11.569 7.997 11.633 8.01 11.693 8.036C11.751 8.06 11.805 8.097 11.854 8.146L12 8.293L12 8.292L13 9.292ZM9 2.707L9 4C9 4.276 9.098 4.512 9.293 4.707C9.488 4.902 9.724 5 10 5L11.293 5L9 2.707Z" />
    </svg>
  );
}

Vue

Vue: see /icons/file-export.md

Svelte

Svelte: see /icons/file-export.md

HTML img

HTML img: see /icons/file-export.md

CSS

CSS: see /icons/file-export.md

Data URL

Data URL: see /icons/file-export.md

Sprite

Sprite: see /icons/file-export.md

SwiftUI

SwiftUI: see /icons/file-export.md

Compose

Compose: see /icons/file-export.md

Android XML

Android XML: see /icons/file-export.md

Flutter

Flutter: see /icons/file-export.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Use it for

export file, export document

Alternatives

export: the bare export when the UI already names the file
file-arrow-up: upload a file to a server (upload-file)

Don’t confuse with

file-arrow-down: download saves a copy from a server, not an export

Also fits

export: export a file where the target must be named
upload file: export out of the app in another format (export-file)

Tags

document, export, output, save-as, arrow, out

Category

Files & folders

Component name

FileExportIcon

History

2026-10-15 added

Family 42

contract file file-alert file-arrow-down file-arrow-up file-binary file-chart file-check file-clock file-cloud file-code file-diff

More files & folders icons

archive archive-arrow-up archive-clock archive-lock archive-search book book-arrow-down book-bookmark book-check book-clock book-open book-plus book-search book-x folder folder-alert · all files & folders icons

For agents

Metadata: /icons/file-export.json · Markdown: /icons/file-export.md · SVG: https://gentleface.com/svg/{style}/16/file-export.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/file-export.png

file-export icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp