Gentleface › Files & folders › file-image

file-image icon

File image: image file, picture file, photo file. 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 13C13 13.254 12.953 13.5 12.86 13.736C12.821 13.834 12.775 13.927 12.723 14.016C12.715 14.029 12.707 14.042 12.699 14.056C12.619 14.185 12.524 14.304 12.414 14.414C12.293 14.535 12.161 14.638 12.016 14.723C11.927 14.775 11.834 14.821 11.736 14.86C11.5 14.953 11.254 15 11 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.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 10.293L5.086 9.207C5.266 9.027 5.472 8.887 5.706 8.786C5.959 8.676 6.224 8.621 6.5 8.621C6.776 8.621 7.041 8.676 7.294 8.786C7.528 8.887 7.734 9.027 7.914 9.207L11.968 13.261C11.989 13.178 12 13.091 12 13L12 6.5C12 6.329 11.978 6.162 11.934 6ZM9 2.707L9 4C9 4.276 9.098 4.512 9.293 4.707C9.488 4.902 9.724 5 10 5L11.293 5L9 2.707ZM10.707 7.293C10.902 7.488 11 7.724 11 8C11 8.276 10.902 8.512 10.707 8.707C10.512 8.902 10.276 9 10 9C9.724 9 9.488 8.902 9.293 8.707C9.098 8.512 9 8.276 9 8C9 7.724 9.098 7.488 9.293 7.293C9.488 7.098 9.724 7 10 7C10.276 7 10.512 7.098 10.707 7.293ZM4 11.707L4 13C4 13.276 4.098 13.512 4.293 13.707C4.488 13.902 4.724 14 5 14L11 14C11.091 14 11.178 13.989 11.261 13.968L7.207 9.914C7.012 9.719 6.776 9.621 6.5 9.621C6.224 9.621 5.988 9.719 5.793 9.914L4 11.707Z"/></svg>

React

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

export function FileImageIcon(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 13C13 13.254 12.953 13.5 12.86 13.736C12.821 13.834 12.775 13.927 12.723 14.016C12.715 14.029 12.707 14.042 12.699 14.056C12.619 14.185 12.524 14.304 12.414 14.414C12.293 14.535 12.161 14.638 12.016 14.723C11.927 14.775 11.834 14.821 11.736 14.86C11.5 14.953 11.254 15 11 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.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 10.293L5.086 9.207C5.266 9.027 5.472 8.887 5.706 8.786C5.959 8.676 6.224 8.621 6.5 8.621C6.776 8.621 7.041 8.676 7.294 8.786C7.528 8.887 7.734 9.027 7.914 9.207L11.968 13.261C11.989 13.178 12 13.091 12 13L12 6.5C12 6.329 11.978 6.162 11.934 6ZM9 2.707L9 4C9 4.276 9.098 4.512 9.293 4.707C9.488 4.902 9.724 5 10 5L11.293 5L9 2.707ZM10.707 7.293C10.902 7.488 11 7.724 11 8C11 8.276 10.902 8.512 10.707 8.707C10.512 8.902 10.276 9 10 9C9.724 9 9.488 8.902 9.293 8.707C9.098 8.512 9 8.276 9 8C9 7.724 9.098 7.488 9.293 7.293C9.488 7.098 9.724 7 10 7C10.276 7 10.512 7.098 10.707 7.293ZM4 11.707L4 13C4 13.276 4.098 13.512 4.293 13.707C4.488 13.902 4.724 14 5 14L11 14C11.091 14 11.178 13.989 11.261 13.968L7.207 9.914C7.012 9.719 6.776 9.621 6.5 9.621C6.224 9.621 5.988 9.719 5.793 9.914L4 11.707Z" />
    </svg>
  );
}

Vue

Vue: see /icons/file-image.md

Svelte

Svelte: see /icons/file-image.md

HTML img

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

CSS

CSS: see /icons/file-image.md

Data URL

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

Sprite

Sprite: see /icons/file-image.md

SwiftUI

SwiftUI: see /icons/file-image.md

Compose

Compose: see /icons/file-image.md

Android XML

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

Flutter

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

image file, picture file, photo file

Alternatives

image: an image or photo without the file (image)
file-vector: a vector graphic such as SVG (vector-file)

Also fits

vector file: a raster image such as PNG or JPEG (image-file)
image: an image file in a file list (image-file)

Tags

document, image, picture, photo, media

Category

Files & folders

Component name

FileImageIcon

History

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

file-image icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp