folder pin icon

folder-pin from Huge Icons by Hugeicons · Stroke · MIT Free for personal and commercial use.

Name
folder-pin
Set
Huge Icons
Style
Stroke
Viewbox
24×24
License
MIT

The same icon in other sets

Related icons in Huge Icons

Use the folder pin icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M14.024 21h-2.002c-4.724 0-7.087 0-8.554-1.465C2 18.072 2 15.715 2 11V7.944c0-1.816 0-2.724.381-3.406a3 3 0 0 1 1.16-1.158C4.224 3 5.135 3 6.955 3c1.167 0 1.75 0 2.26.191c1.166.436 1.646 1.493 2.172 2.542L12.022 7M8.013 7h8.77c2.111 0 3.167 0 3.925.506c.328.218.61.5.83.827c.281.42.406.933.462 1.667"/><path stroke-linejoin="round" d="M19 18h-1.425c-.904 0-1.356 0-1.522-.254c-.166-.253.067-.589.532-1.26l.453-.655c.114-.163.17-.245.189-.337s-.003-.186-.047-.373l-.213-.925c-.128-.553-.192-.83-.018-1.013c.173-.183.498-.183 1.15-.183h1.802c.651 0 .977 0 1.15.183c.174.183.11.46-.018 1.013l-.213.925c-.044.187-.065.28-.047.373s.075.174.189.338l.453.653c.465.672.698 1.008.532 1.261c-.166.254-.618.254-1.522.254zm0 0v3"/></g></svg>

React

import type { SVGProps } from "react";

export function HugeiconsFolderPin(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinecap="round" strokeWidth="1.5"><path d="M14.024 21h-2.002c-4.724 0-7.087 0-8.554-1.465C2 18.072 2 15.715 2 11V7.944c0-1.816 0-2.724.381-3.406a3 3 0 0 1 1.16-1.158C4.224 3 5.135 3 6.955 3c1.167 0 1.75 0 2.26.191c1.166.436 1.646 1.493 2.172 2.542L12.022 7M8.013 7h8.77c2.111 0 3.167 0 3.925.506c.328.218.61.5.83.827c.281.42.406.933.462 1.667"/><path strokeLinejoin="round" d="M19 18h-1.425c-.904 0-1.356 0-1.522-.254c-.166-.253.067-.589.532-1.26l.453-.655c.114-.163.17-.245.189-.337s-.003-.186-.047-.373l-.213-.925c-.128-.553-.192-.83-.018-1.013c.173-.183.498-.183 1.15-.183h1.802c.651 0 .977 0 1.15.183c.174.183.11.46-.018 1.013l-.213.925c-.044.187-.065.28-.047.373s.075.174.189.338l.453.653c.465.672.698 1.008.532 1.261c-.166.254-.618.254-1.522.254zm0 0v3"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M14.024 21h-2.002c-4.724 0-7.087 0-8.554-1.465C2 18.072 2 15.715 2 11V7.944c0-1.816 0-2.724.381-3.406a3 3 0 0 1 1.16-1.158C4.224 3 5.135 3 6.955 3c1.167 0 1.75 0 2.26.191c1.166.436 1.646 1.493 2.172 2.542L12.022 7M8.013 7h8.77c2.111 0 3.167 0 3.925.506c.328.218.61.5.83.827c.281.42.406.933.462 1.667"/><path stroke-linejoin="round" d="M19 18h-1.425c-.904 0-1.356 0-1.522-.254c-.166-.253.067-.589.532-1.26l.453-.655c.114-.163.17-.245.189-.337s-.003-.186-.047-.373l-.213-.925c-.128-.553-.192-.83-.018-1.013c.173-.183.498-.183 1.15-.183h1.802c.651 0 .977 0 1.15.183c.174.183.11.46-.018 1.013l-.213.925c-.044.187-.065.28-.047.373s.075.174.189.338l.453.653c.465.672.698 1.008.532 1.261c-.166.254-.618.254-1.522.254zm0 0v3"/></g></svg>
</template>

CSS

.icon-folder-pin {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M14.024%2021h-2.002c-4.724%200-7.087%200-8.554-1.465C2%2018.072%202%2015.715%202%2011V7.944c0-1.816%200-2.724.381-3.406a3%203%200%200%201%201.16-1.158C4.224%203%205.135%203%206.955%203c1.167%200%201.75%200%202.26.191c1.166.436%201.646%201.493%202.172%202.542L12.022%207M8.013%207h8.77c2.111%200%203.167%200%203.925.506c.328.218.61.5.83.827c.281.42.406.933.462%201.667%22%2F%3E%3Cpath%20stroke-linejoin%3D%22round%22%20d%3D%22M19%2018h-1.425c-.904%200-1.356%200-1.522-.254c-.166-.253.067-.589.532-1.26l.453-.655c.114-.163.17-.245.189-.337s-.003-.186-.047-.373l-.213-.925c-.128-.553-.192-.83-.018-1.013c.173-.183.498-.183%201.15-.183h1.802c.651%200%20.977%200%201.15.183c.174.183.11.46-.018%201.013l-.213.925c-.044.187-.065.28-.047.373s.075.174.189.338l.453.653c.465.672.698%201.008.532%201.261c-.166.254-.618.254-1.522.254zm0%200v3%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M14.024%2021h-2.002c-4.724%200-7.087%200-8.554-1.465C2%2018.072%202%2015.715%202%2011V7.944c0-1.816%200-2.724.381-3.406a3%203%200%200%201%201.16-1.158C4.224%203%205.135%203%206.955%203c1.167%200%201.75%200%202.26.191c1.166.436%201.646%201.493%202.172%202.542L12.022%207M8.013%207h8.77c2.111%200%203.167%200%203.925.506c.328.218.61.5.83.827c.281.42.406.933.462%201.667%22%2F%3E%3Cpath%20stroke-linejoin%3D%22round%22%20d%3D%22M19%2018h-1.425c-.904%200-1.356%200-1.522-.254c-.166-.253.067-.589.532-1.26l.453-.655c.114-.163.17-.245.189-.337s-.003-.186-.047-.373l-.213-.925c-.128-.553-.192-.83-.018-1.013c.173-.183.498-.183%201.15-.183h1.802c.651%200%20.977%200%201.15.183c.174.183.11.46-.018%201.013l-.213.925c-.044.187-.065.28-.047.373s.075.174.189.338l.453.653c.465.672.698%201.008.532%201.261c-.166.254-.618.254-1.522.254zm0%200v3%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/hugeicons/folder-pin.svg?color=%231a73e8&size=48