puzzle piece icon
puzzle-piece from Phosphor by Phosphor Icons · Regular · MIT Free for personal and commercial use.
- Name
- puzzle-piece
- Set
- Phosphor
- Style
- Regular
- Viewbox
- 256×256
- License
- MIT
5 other variants in Phosphor
The same icon in other sets
puzzle-pieceFont Awesome 6 Solidpuzzle-pieceFont Awesome Solidpuzzle-piece-12-filledFluent UI System Iconspuzzle-piece-16Fluent UI System Color Iconspuzzle-pieceFluent Emojipuzzle-pieceFluent Emoji Flatpuzzle-pieceFluent Emoji High Contrastpuzzle-pieceHeroIconspuzzle-pieceLine Awesomepuzzle-pieceNoto Emojipuzzle-pieceOpenMojipuzzle-pieceTwitter Emojipuzzle-pieceUnicons
Use the puzzle piece icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M220.27 158.54a8 8 0 0 0-7.7-.46a20 20 0 1 1 0-36.16a8 8 0 0 0 11.43-7.23V72a16 16 0 0 0-16-16h-36.22a35 35 0 0 0 .22-4a36.1 36.1 0 0 0-11.36-26.24a36 36 0 0 0-60.55 23.62a36.6 36.6 0 0 0 .14 6.62H64a16 16 0 0 0-16 16v32.22a35 35 0 0 0-4-.22a36.12 36.12 0 0 0-26.24 11.36a35.7 35.7 0 0 0-9.69 27a36.08 36.08 0 0 0 33.31 33.6a35.7 35.7 0 0 0 6.62-.14V208a16 16 0 0 0 16 16h144a16 16 0 0 0 16-16v-42.69a8 8 0 0 0-3.73-6.77M208 208H64v-42.69a8 8 0 0 0-11.43-7.23a20 20 0 1 1 0-36.16A8 8 0 0 0 64 114.69V72h46.69a8 8 0 0 0 7.23-11.43a20 20 0 1 1 36.16 0A8 8 0 0 0 161.31 72H208v32.23a35.7 35.7 0 0 0-6.62-.14A36 36 0 0 0 204 176a35 35 0 0 0 4-.22Z"/></svg>
React
import type { SVGProps } from "react";
export function PhPuzzlePiece(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M220.27 158.54a8 8 0 0 0-7.7-.46a20 20 0 1 1 0-36.16a8 8 0 0 0 11.43-7.23V72a16 16 0 0 0-16-16h-36.22a35 35 0 0 0 .22-4a36.1 36.1 0 0 0-11.36-26.24a36 36 0 0 0-60.55 23.62a36.6 36.6 0 0 0 .14 6.62H64a16 16 0 0 0-16 16v32.22a35 35 0 0 0-4-.22a36.12 36.12 0 0 0-26.24 11.36a35.7 35.7 0 0 0-9.69 27a36.08 36.08 0 0 0 33.31 33.6a35.7 35.7 0 0 0 6.62-.14V208a16 16 0 0 0 16 16h144a16 16 0 0 0 16-16v-42.69a8 8 0 0 0-3.73-6.77M208 208H64v-42.69a8 8 0 0 0-11.43-7.23a20 20 0 1 1 0-36.16A8 8 0 0 0 64 114.69V72h46.69a8 8 0 0 0 7.23-11.43a20 20 0 1 1 36.16 0A8 8 0 0 0 161.31 72H208v32.23a35.7 35.7 0 0 0-6.62-.14A36 36 0 0 0 204 176a35 35 0 0 0 4-.22Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M220.27 158.54a8 8 0 0 0-7.7-.46a20 20 0 1 1 0-36.16a8 8 0 0 0 11.43-7.23V72a16 16 0 0 0-16-16h-36.22a35 35 0 0 0 .22-4a36.1 36.1 0 0 0-11.36-26.24a36 36 0 0 0-60.55 23.62a36.6 36.6 0 0 0 .14 6.62H64a16 16 0 0 0-16 16v32.22a35 35 0 0 0-4-.22a36.12 36.12 0 0 0-26.24 11.36a35.7 35.7 0 0 0-9.69 27a36.08 36.08 0 0 0 33.31 33.6a35.7 35.7 0 0 0 6.62-.14V208a16 16 0 0 0 16 16h144a16 16 0 0 0 16-16v-42.69a8 8 0 0 0-3.73-6.77M208 208H64v-42.69a8 8 0 0 0-11.43-7.23a20 20 0 1 1 0-36.16A8 8 0 0 0 64 114.69V72h46.69a8 8 0 0 0 7.23-11.43a20 20 0 1 1 36.16 0A8 8 0 0 0 161.31 72H208v32.23a35.7 35.7 0 0 0-6.62-.14A36 36 0 0 0 204 176a35 35 0 0 0 4-.22Z"/></svg> </template>
CSS
.icon-puzzle-piece {
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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M220.27%20158.54a8%208%200%200%200-7.7-.46a20%2020%200%201%201%200-36.16a8%208%200%200%200%2011.43-7.23V72a16%2016%200%200%200-16-16h-36.22a35%2035%200%200%200%20.22-4a36.1%2036.1%200%200%200-11.36-26.24a36%2036%200%200%200-60.55%2023.62a36.6%2036.6%200%200%200%20.14%206.62H64a16%2016%200%200%200-16%2016v32.22a35%2035%200%200%200-4-.22a36.12%2036.12%200%200%200-26.24%2011.36a35.7%2035.7%200%200%200-9.69%2027a36.08%2036.08%200%200%200%2033.31%2033.6a35.7%2035.7%200%200%200%206.62-.14V208a16%2016%200%200%200%2016%2016h144a16%2016%200%200%200%2016-16v-42.69a8%208%200%200%200-3.73-6.77M208%20208H64v-42.69a8%208%200%200%200-11.43-7.23a20%2020%200%201%201%200-36.16A8%208%200%200%200%2064%20114.69V72h46.69a8%208%200%200%200%207.23-11.43a20%2020%200%201%201%2036.16%200A8%208%200%200%200%20161.31%2072H208v32.23a35.7%2035.7%200%200%200-6.62-.14A36%2036%200%200%200%20204%20176a35%2035%200%200%200%204-.22Z%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M220.27%20158.54a8%208%200%200%200-7.7-.46a20%2020%200%201%201%200-36.16a8%208%200%200%200%2011.43-7.23V72a16%2016%200%200%200-16-16h-36.22a35%2035%200%200%200%20.22-4a36.1%2036.1%200%200%200-11.36-26.24a36%2036%200%200%200-60.55%2023.62a36.6%2036.6%200%200%200%20.14%206.62H64a16%2016%200%200%200-16%2016v32.22a35%2035%200%200%200-4-.22a36.12%2036.12%200%200%200-26.24%2011.36a35.7%2035.7%200%200%200-9.69%2027a36.08%2036.08%200%200%200%2033.31%2033.6a35.7%2035.7%200%200%200%206.62-.14V208a16%2016%200%200%200%2016%2016h144a16%2016%200%200%200%2016-16v-42.69a8%208%200%200%200-3.73-6.77M208%20208H64v-42.69a8%208%200%200%200-11.43-7.23a20%2020%200%201%201%200-36.16A8%208%200%200%200%2064%20114.69V72h46.69a8%208%200%200%200%207.23-11.43a20%2020%200%201%201%2036.16%200A8%208%200%200%200%20161.31%2072H208v32.23a35.7%2035.7%200%200%200-6.62-.14A36%2036%200%200%200%20204%20176a35%2035%200%200%200%204-.22Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/puzzle-piece.svg?color=%231a73e8&size=48
