Gentleface › Files & folders › folder-pin

folder-pin icon

Folder pin: pinned folder. 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="M1.14 3.264C1.242 3.007 1.391 2.781 1.586 2.586C1.781 2.391 2.007 2.242 2.264 2.14C2.5 2.047 2.746 2 3 2L4.5 2C4.886 2 5.258 2.074 5.615 2.222C5.972 2.37 6.287 2.58 6.561 2.854L7.146 3.439C7.326 3.619 7.533 3.757 7.767 3.854C8.002 3.951 8.246 4 8.5 4L13 4C13.254 4 13.5 4.047 13.736 4.14C13.993 4.242 14.219 4.391 14.414 4.586C14.609 4.781 14.758 5.007 14.86 5.264C14.953 5.5 15 5.746 15 6L15 8.5C15 8.641 14.952 8.759 14.856 8.856C14.759 8.952 14.641 9 14.5 9C14.468 9 14.437 8.997 14.407 8.992L14.008 8.593C14.003 8.563 14 8.532 14 8.5L14 6C14 5.724 13.902 5.488 13.707 5.293C13.512 5.098 13.276 5 13 5L8.5 5C8.114 5 7.742 4.926 7.385 4.778C7.028 4.63 6.713 4.42 6.439 4.146L5.854 3.561C5.674 3.381 5.467 3.243 5.233 3.146C4.998 3.049 4.754 3 4.5 3L3 3C2.724 3 2.488 3.098 2.293 3.293C2.098 3.488 2 3.724 2 4L2 12C2 12.276 2.098 12.512 2.293 12.707C2.488 12.902 2.724 13 3 13L5.5 13C5.641 13 5.759 13.048 5.856 13.144C5.952 13.241 6 13.359 6 13.5C6 13.641 5.952 13.759 5.856 13.856C5.759 13.952 5.641 14 5.5 14L3 14C2.746 14 2.5 13.953 2.264 13.86C2.007 13.758 1.781 13.609 1.586 13.414C1.391 13.219 1.242 12.993 1.14 12.736C1.047 12.5 1 12.254 1 12L1 4C1 3.746 1.047 3.5 1.14 3.264ZM9.793 10C9.931 10 10.049 9.951 10.146 9.854L10.646 9.354C10.744 9.256 10.793 9.138 10.793 9C10.793 8.862 10.744 8.744 10.646 8.646L10.354 8.354C10.254 8.254 10.204 8.136 10.204 8C10.204 7.864 10.254 7.746 10.354 7.646L10.646 7.354C10.746 7.254 10.864 7.204 11 7.204C11.136 7.204 11.254 7.254 11.354 7.354L14.646 10.646C14.746 10.746 14.796 10.864 14.796 11C14.796 11.136 14.746 11.254 14.646 11.354L14.354 11.646C14.254 11.746 14.136 11.796 14 11.796C13.864 11.796 13.746 11.746 13.646 11.646L13.354 11.354C13.256 11.256 13.138 11.207 13 11.207C12.862 11.207 12.744 11.256 12.646 11.354L12.146 11.854C12.049 11.951 12 12.069 12 12.207L12 12.914C12 13.033 11.953 13.147 11.868 13.232C11.692 13.408 11.408 13.408 11.232 13.232L8.768 10.768C8.684 10.684 8.636 10.569 8.636 10.45C8.636 10.201 8.838 10 9.086 10L9.793 10ZM7.146 14.854C7.047 14.754 6.997 14.636 6.997 14.5C6.997 14.364 7.047 14.246 7.146 14.146L9.146 12.146C9.246 12.047 9.364 11.997 9.5 11.997C9.636 11.997 9.754 12.047 9.854 12.146C9.953 12.246 10.003 12.364 10.003 12.5C10.003 12.636 9.953 12.754 9.854 12.854L7.854 14.854C7.756 14.951 7.638 15 7.5 15C7.362 15 7.244 14.951 7.146 14.854Z"/></svg>

React

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

export function FolderPinIcon(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="M1.14 3.264C1.242 3.007 1.391 2.781 1.586 2.586C1.781 2.391 2.007 2.242 2.264 2.14C2.5 2.047 2.746 2 3 2L4.5 2C4.886 2 5.258 2.074 5.615 2.222C5.972 2.37 6.287 2.58 6.561 2.854L7.146 3.439C7.326 3.619 7.533 3.757 7.767 3.854C8.002 3.951 8.246 4 8.5 4L13 4C13.254 4 13.5 4.047 13.736 4.14C13.993 4.242 14.219 4.391 14.414 4.586C14.609 4.781 14.758 5.007 14.86 5.264C14.953 5.5 15 5.746 15 6L15 8.5C15 8.641 14.952 8.759 14.856 8.856C14.759 8.952 14.641 9 14.5 9C14.468 9 14.437 8.997 14.407 8.992L14.008 8.593C14.003 8.563 14 8.532 14 8.5L14 6C14 5.724 13.902 5.488 13.707 5.293C13.512 5.098 13.276 5 13 5L8.5 5C8.114 5 7.742 4.926 7.385 4.778C7.028 4.63 6.713 4.42 6.439 4.146L5.854 3.561C5.674 3.381 5.467 3.243 5.233 3.146C4.998 3.049 4.754 3 4.5 3L3 3C2.724 3 2.488 3.098 2.293 3.293C2.098 3.488 2 3.724 2 4L2 12C2 12.276 2.098 12.512 2.293 12.707C2.488 12.902 2.724 13 3 13L5.5 13C5.641 13 5.759 13.048 5.856 13.144C5.952 13.241 6 13.359 6 13.5C6 13.641 5.952 13.759 5.856 13.856C5.759 13.952 5.641 14 5.5 14L3 14C2.746 14 2.5 13.953 2.264 13.86C2.007 13.758 1.781 13.609 1.586 13.414C1.391 13.219 1.242 12.993 1.14 12.736C1.047 12.5 1 12.254 1 12L1 4C1 3.746 1.047 3.5 1.14 3.264ZM9.793 10C9.931 10 10.049 9.951 10.146 9.854L10.646 9.354C10.744 9.256 10.793 9.138 10.793 9C10.793 8.862 10.744 8.744 10.646 8.646L10.354 8.354C10.254 8.254 10.204 8.136 10.204 8C10.204 7.864 10.254 7.746 10.354 7.646L10.646 7.354C10.746 7.254 10.864 7.204 11 7.204C11.136 7.204 11.254 7.254 11.354 7.354L14.646 10.646C14.746 10.746 14.796 10.864 14.796 11C14.796 11.136 14.746 11.254 14.646 11.354L14.354 11.646C14.254 11.746 14.136 11.796 14 11.796C13.864 11.796 13.746 11.746 13.646 11.646L13.354 11.354C13.256 11.256 13.138 11.207 13 11.207C12.862 11.207 12.744 11.256 12.646 11.354L12.146 11.854C12.049 11.951 12 12.069 12 12.207L12 12.914C12 13.033 11.953 13.147 11.868 13.232C11.692 13.408 11.408 13.408 11.232 13.232L8.768 10.768C8.684 10.684 8.636 10.569 8.636 10.45C8.636 10.201 8.838 10 9.086 10L9.793 10ZM7.146 14.854C7.047 14.754 6.997 14.636 6.997 14.5C6.997 14.364 7.047 14.246 7.146 14.146L9.146 12.146C9.246 12.047 9.364 11.997 9.5 11.997C9.636 11.997 9.754 12.047 9.854 12.146C9.953 12.246 10.003 12.364 10.003 12.5C10.003 12.636 9.953 12.754 9.854 12.854L7.854 14.854C7.756 14.951 7.638 15 7.5 15C7.362 15 7.244 14.951 7.146 14.854Z" />
    </svg>
  );
}

Vue

Vue: see /icons/folder-pin.md

Svelte

Svelte: see /icons/folder-pin.md

HTML img

HTML img: see /icons/folder-pin.md

CSS

CSS: see /icons/folder-pin.md

Data URL

Data URL: see /icons/folder-pin.md

Sprite

Sprite: see /icons/folder-pin.md

SwiftUI

SwiftUI: see /icons/folder-pin.md

Compose

Compose: see /icons/folder-pin.md

Android XML

Android XML: see /icons/folder-pin.md

Flutter

Flutter: see /icons/folder-pin.md

Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too. 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

pinned folder

Tags

directory, folder, pin, pinned, pushpin, keep

Category

Files & folders

Component name

FolderPinIcon

History

2026-11-12 20 px drawn, 24 px drawn, added

Family 45

folder folder-alert folder-arrow-down folder-arrow-right folder-arrow-up folder-ban folder-bolt folder-bookmark folder-chart folder-check folder-clock folder-cloud

More files & folders icons

archive archive-arrow-up archive-clock archive-gear archive-lock archive-off archive-search archive-x book book-a book-alert book-arrow-down book-arrow-up book-bookmark book-check book-clock · all files & folders icons

For agents

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

folder-pin icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp