Gentleface › Files & folders › file-import

file-import icon

File import: import file, import 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 14L8.879 14L9.879 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.385ZM11.693 8.036C11.751 8.06 11.805 8.097 11.854 8.146C11.949 8.242 11.998 8.358 12 8.494L12 8.497L12 8.499L12 8.443C12.002 8.462 12.003 8.481 12.003 8.5C12.003 8.519 12.002 8.538 12 8.557L12 8.501L12 8.504C11.998 8.641 11.949 8.758 11.854 8.854L9.938 10.769L9.707 11L14.5 11C14.641 11 14.759 11.048 14.856 11.144C14.952 11.241 15 11.359 15 11.5C15 11.641 14.952 11.759 14.856 11.856C14.759 11.952 14.641 12 14.5 12L9.707 12L9.938 12.231L11.547 13.84L11.547 13.839L11.854 14.146C11.953 14.246 12.003 14.364 12.003 14.5C12.003 14.603 11.975 14.695 11.918 14.777C11.859 14.807 11.799 14.835 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.854L10.292 14L10.293 14L8.146 11.853L8.146 11.853L8.14 11.847C8.045 11.748 7.997 11.633 7.997 11.5C7.997 11.364 8.047 11.246 8.146 11.146L11.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.036ZM9 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-import" (line-round), MIT. https://gentleface.com/icons/file-import
import type { SVGProps } from 'react';

export function FileImportIcon(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 14L8.879 14L9.879 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.385ZM11.693 8.036C11.751 8.06 11.805 8.097 11.854 8.146C11.949 8.242 11.998 8.358 12 8.494L12 8.497L12 8.499L12 8.443C12.002 8.462 12.003 8.481 12.003 8.5C12.003 8.519 12.002 8.538 12 8.557L12 8.501L12 8.504C11.998 8.641 11.949 8.758 11.854 8.854L9.938 10.769L9.707 11L14.5 11C14.641 11 14.759 11.048 14.856 11.144C14.952 11.241 15 11.359 15 11.5C15 11.641 14.952 11.759 14.856 11.856C14.759 11.952 14.641 12 14.5 12L9.707 12L9.938 12.231L11.547 13.84L11.547 13.839L11.854 14.146C11.953 14.246 12.003 14.364 12.003 14.5C12.003 14.603 11.975 14.695 11.918 14.777C11.859 14.807 11.799 14.835 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.854L10.292 14L10.293 14L8.146 11.853L8.146 11.853L8.14 11.847C8.045 11.748 7.997 11.633 7.997 11.5C7.997 11.364 8.047 11.246 8.146 11.146L11.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.036ZM9 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-import.md

Svelte

Svelte: see /icons/file-import.md

HTML img

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

CSS

CSS: see /icons/file-import.md

Data URL

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

Sprite

Sprite: see /icons/file-import.md

SwiftUI

SwiftUI: see /icons/file-import.md

Compose

Compose: see /icons/file-import.md

Android XML

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

Flutter

Flutter: see /icons/file-import.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

import file, import document

Alternatives

import: the bare import 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: the down arrow means download, not import

Also fits

import: import a file where the target must be named

Not for

download file (use file-arrow-down): an arrow entering from the left means import into the app, not download

Tags

document, import, input, open, arrow, in

Category

Files & folders

Component name

FileImportIcon

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-import.json · Markdown: /icons/file-import.md · SVG: https://gentleface.com/svg/{style}/16/file-import.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/file-import.png

file-import icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp