paperclip icon
paperclip from BoxIcons v2 by Boxicons · Regular · MIT Free for personal and commercial use.
- Name
- paperclip
- Set
- BoxIcons v2
- Style
- Regular
- Viewbox
- 24×24
- License
- MIT
- Aliases
- bx-paperclip
The same icon in other sets
paperclipBootstrap IconspaperclipEmoji One (Colored)paperclipElement PluspaperclipFramework7 IconspaperclipFont Awesome 6 SolidpaperclipFont Awesome SolidpaperclipFeather IconspaperclipFluent EmojipaperclipFluent Emoji FlatpaperclipFluent Emoji High ContrastpaperclipFirefox OS EmojipaperclipHuge IconspaperclipHumbleiconspaperclipIconParkpaperclipIconPark OutlinepaperclipIonIconspaperclipLine AwesomepaperclipLucidepaperclipMaterial Design IconspaperclipMyna UI IconspaperclipNoto Emojipaperclip-16OcticonspaperclipOpenMojipaperclipPhosphor
Use the paperclip icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M17.004 5H9c-1.838 0-3.586.737-4.924 2.076S2 10.163 2 12s.737 3.586 2.076 4.924S7.162 19 9 19h8v-2H9c-1.303 0-2.55-.529-3.51-1.49C4.529 14.55 4 13.303 4 12s.529-2.549 1.49-3.51C6.45 7.529 7.697 7 9 7h8V6l.001 1h.003c.79 0 1.539.314 2.109.886c.571.571.886 1.322.887 2.116a2.97 2.97 0 0 1-.884 2.11A3 3 0 0 1 17 13H9a1 1 0 0 1-.698-.3A1 1 0 0 1 8 12c0-.252.11-.507.301-.698A1 1 0 0 1 9 11h8V9H9c-.79 0-1.541.315-2.114.889C6.314 10.461 6 11.211 6 12s.314 1.54.888 2.114A2.97 2.97 0 0 0 9 15h8.001a4.97 4.97 0 0 0 3.528-1.473a4.967 4.967 0 0 0-.001-7.055A4.95 4.95 0 0 0 17.004 5"/></svg>
React
import type { SVGProps } from "react";
export function BxPaperclip(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M17.004 5H9c-1.838 0-3.586.737-4.924 2.076S2 10.163 2 12s.737 3.586 2.076 4.924S7.162 19 9 19h8v-2H9c-1.303 0-2.55-.529-3.51-1.49C4.529 14.55 4 13.303 4 12s.529-2.549 1.49-3.51C6.45 7.529 7.697 7 9 7h8V6l.001 1h.003c.79 0 1.539.314 2.109.886c.571.571.886 1.322.887 2.116a2.97 2.97 0 0 1-.884 2.11A3 3 0 0 1 17 13H9a1 1 0 0 1-.698-.3A1 1 0 0 1 8 12c0-.252.11-.507.301-.698A1 1 0 0 1 9 11h8V9H9c-.79 0-1.541.315-2.114.889C6.314 10.461 6 11.211 6 12s.314 1.54.888 2.114A2.97 2.97 0 0 0 9 15h8.001a4.97 4.97 0 0 0 3.528-1.473a4.967 4.967 0 0 0-.001-7.055A4.95 4.95 0 0 0 17.004 5"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M17.004 5H9c-1.838 0-3.586.737-4.924 2.076S2 10.163 2 12s.737 3.586 2.076 4.924S7.162 19 9 19h8v-2H9c-1.303 0-2.55-.529-3.51-1.49C4.529 14.55 4 13.303 4 12s.529-2.549 1.49-3.51C6.45 7.529 7.697 7 9 7h8V6l.001 1h.003c.79 0 1.539.314 2.109.886c.571.571.886 1.322.887 2.116a2.97 2.97 0 0 1-.884 2.11A3 3 0 0 1 17 13H9a1 1 0 0 1-.698-.3A1 1 0 0 1 8 12c0-.252.11-.507.301-.698A1 1 0 0 1 9 11h8V9H9c-.79 0-1.541.315-2.114.889C6.314 10.461 6 11.211 6 12s.314 1.54.888 2.114A2.97 2.97 0 0 0 9 15h8.001a4.97 4.97 0 0 0 3.528-1.473a4.967 4.967 0 0 0-.001-7.055A4.95 4.95 0 0 0 17.004 5"/></svg> </template>
CSS
.icon-paperclip {
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%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M17.004%205H9c-1.838%200-3.586.737-4.924%202.076S2%2010.163%202%2012s.737%203.586%202.076%204.924S7.162%2019%209%2019h8v-2H9c-1.303%200-2.55-.529-3.51-1.49C4.529%2014.55%204%2013.303%204%2012s.529-2.549%201.49-3.51C6.45%207.529%207.697%207%209%207h8V6l.001%201h.003c.79%200%201.539.314%202.109.886c.571.571.886%201.322.887%202.116a2.97%202.97%200%200%201-.884%202.11A3%203%200%200%201%2017%2013H9a1%201%200%200%201-.698-.3A1%201%200%200%201%208%2012c0-.252.11-.507.301-.698A1%201%200%200%201%209%2011h8V9H9c-.79%200-1.541.315-2.114.889C6.314%2010.461%206%2011.211%206%2012s.314%201.54.888%202.114A2.97%202.97%200%200%200%209%2015h8.001a4.97%204.97%200%200%200%203.528-1.473a4.967%204.967%200%200%200-.001-7.055A4.95%204.95%200%200%200%2017.004%205%22%2F%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%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M17.004%205H9c-1.838%200-3.586.737-4.924%202.076S2%2010.163%202%2012s.737%203.586%202.076%204.924S7.162%2019%209%2019h8v-2H9c-1.303%200-2.55-.529-3.51-1.49C4.529%2014.55%204%2013.303%204%2012s.529-2.549%201.49-3.51C6.45%207.529%207.697%207%209%207h8V6l.001%201h.003c.79%200%201.539.314%202.109.886c.571.571.886%201.322.887%202.116a2.97%202.97%200%200%201-.884%202.11A3%203%200%200%201%2017%2013H9a1%201%200%200%201-.698-.3A1%201%200%200%201%208%2012c0-.252.11-.507.301-.698A1%201%200%200%201%209%2011h8V9H9c-.79%200-1.541.315-2.114.889C6.314%2010.461%206%2011.211%206%2012s.314%201.54.888%202.114A2.97%202.97%200%200%200%209%2015h8.001a4.97%204.97%200%200%200%203.528-1.473a4.967%204.967%200%200%200-.001-7.055A4.95%204.95%200%200%200%2017.004%205%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/bx/paperclip.svg?color=%231a73e8&size=48
