puzzle piece icon
puzzle-piece-20-solid from HeroIcons by Refactoring UI Inc · Solid 20x20 · MIT Free for personal and commercial use.
- Name
- puzzle-piece-20-solid
- Set
- HeroIcons
- Style
- Solid 20x20
- Viewbox
- 20×20
- License
- MIT
3 other variants in HeroIcons
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-pieceLine Awesomepuzzle-pieceNoto Emojipuzzle-pieceOpenMojipuzzle-piecePhosphorpuzzle-pieceTwitter Emojipuzzle-pieceUnicons
Use the puzzle piece icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M12 4.467c0-.405.262-.75.559-1.027c.276-.257.441-.584.441-.94c0-.828-.895-1.5-2-1.5s-2 .672-2 1.5c0 .362.171.694.456.953c.29.265.544.6.544.994a.97.97 0 0 1-1.024.974a40 40 0 0 1-3.014-.306a.75.75 0 0 0-.847.847q.21 1.49.306 3.014A.97.97 0 0 1 4.447 10c-.393 0-.729-.253-.994-.544C3.194 9.17 2.862 9 2.5 9C1.672 9 1 9.895 1 11s.672 2 1.5 2c.356 0 .683-.165.94-.441c.276-.297.622-.559 1.027-.559a.997.997 0 0 1 1.004 1.03a40 40 0 0 1-.319 3.734a.75.75 0 0 0 .64.842q1.575.219 3.184.318A.97.97 0 0 0 10 16.948c0-.394-.254-.73-.545-.995C9.171 15.693 9 15.362 9 15c0-.828.895-1.5 2-1.5s2 .672 2 1.5c0 .356-.165.683-.441.94c-.297.276-.559.622-.559 1.027a1 1 0 0 0 1.03 1.005q2.007-.075 3.961-.337a.75.75 0 0 0 .644-.644q.263-1.954.337-3.961A1 1 0 0 0 16.967 12c-.405 0-.75.262-1.027.559c-.257.276-.584.441-.94.441c-.828 0-1.5-.895-1.5-2s.672-2 1.5-2c.362 0 .694.17.953.455c.265.291.601.545.995.545a.97.97 0 0 0 .976-1.024a41 41 0 0 0-.318-3.184a.75.75 0 0 0-.842-.64q-1.842.247-3.734.319A.997.997 0 0 1 12 4.467"/></svg>
React
import type { SVGProps } from "react";
export function HeroiconsPuzzlePiece20Solid(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M12 4.467c0-.405.262-.75.559-1.027c.276-.257.441-.584.441-.94c0-.828-.895-1.5-2-1.5s-2 .672-2 1.5c0 .362.171.694.456.953c.29.265.544.6.544.994a.97.97 0 0 1-1.024.974a40 40 0 0 1-3.014-.306a.75.75 0 0 0-.847.847q.21 1.49.306 3.014A.97.97 0 0 1 4.447 10c-.393 0-.729-.253-.994-.544C3.194 9.17 2.862 9 2.5 9C1.672 9 1 9.895 1 11s.672 2 1.5 2c.356 0 .683-.165.94-.441c.276-.297.622-.559 1.027-.559a.997.997 0 0 1 1.004 1.03a40 40 0 0 1-.319 3.734a.75.75 0 0 0 .64.842q1.575.219 3.184.318A.97.97 0 0 0 10 16.948c0-.394-.254-.73-.545-.995C9.171 15.693 9 15.362 9 15c0-.828.895-1.5 2-1.5s2 .672 2 1.5c0 .356-.165.683-.441.94c-.297.276-.559.622-.559 1.027a1 1 0 0 0 1.03 1.005q2.007-.075 3.961-.337a.75.75 0 0 0 .644-.644q.263-1.954.337-3.961A1 1 0 0 0 16.967 12c-.405 0-.75.262-1.027.559c-.257.276-.584.441-.94.441c-.828 0-1.5-.895-1.5-2s.672-2 1.5-2c.362 0 .694.17.953.455c.265.291.601.545.995.545a.97.97 0 0 0 .976-1.024a41 41 0 0 0-.318-3.184a.75.75 0 0 0-.842-.64q-1.842.247-3.734.319A.997.997 0 0 1 12 4.467"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M12 4.467c0-.405.262-.75.559-1.027c.276-.257.441-.584.441-.94c0-.828-.895-1.5-2-1.5s-2 .672-2 1.5c0 .362.171.694.456.953c.29.265.544.6.544.994a.97.97 0 0 1-1.024.974a40 40 0 0 1-3.014-.306a.75.75 0 0 0-.847.847q.21 1.49.306 3.014A.97.97 0 0 1 4.447 10c-.393 0-.729-.253-.994-.544C3.194 9.17 2.862 9 2.5 9C1.672 9 1 9.895 1 11s.672 2 1.5 2c.356 0 .683-.165.94-.441c.276-.297.622-.559 1.027-.559a.997.997 0 0 1 1.004 1.03a40 40 0 0 1-.319 3.734a.75.75 0 0 0 .64.842q1.575.219 3.184.318A.97.97 0 0 0 10 16.948c0-.394-.254-.73-.545-.995C9.171 15.693 9 15.362 9 15c0-.828.895-1.5 2-1.5s2 .672 2 1.5c0 .356-.165.683-.441.94c-.297.276-.559.622-.559 1.027a1 1 0 0 0 1.03 1.005q2.007-.075 3.961-.337a.75.75 0 0 0 .644-.644q.263-1.954.337-3.961A1 1 0 0 0 16.967 12c-.405 0-.75.262-1.027.559c-.257.276-.584.441-.94.441c-.828 0-1.5-.895-1.5-2s.672-2 1.5-2c.362 0 .694.17.953.455c.265.291.601.545.995.545a.97.97 0 0 0 .976-1.024a41 41 0 0 0-.318-3.184a.75.75 0 0 0-.842-.64q-1.842.247-3.734.319A.997.997 0 0 1 12 4.467"/></svg> </template>
CSS
.icon-puzzle-piece-20-solid {
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%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%204.467c0-.405.262-.75.559-1.027c.276-.257.441-.584.441-.94c0-.828-.895-1.5-2-1.5s-2%20.672-2%201.5c0%20.362.171.694.456.953c.29.265.544.6.544.994a.97.97%200%200%201-1.024.974a40%2040%200%200%201-3.014-.306a.75.75%200%200%200-.847.847q.21%201.49.306%203.014A.97.97%200%200%201%204.447%2010c-.393%200-.729-.253-.994-.544C3.194%209.17%202.862%209%202.5%209C1.672%209%201%209.895%201%2011s.672%202%201.5%202c.356%200%20.683-.165.94-.441c.276-.297.622-.559%201.027-.559a.997.997%200%200%201%201.004%201.03a40%2040%200%200%201-.319%203.734a.75.75%200%200%200%20.64.842q1.575.219%203.184.318A.97.97%200%200%200%2010%2016.948c0-.394-.254-.73-.545-.995C9.171%2015.693%209%2015.362%209%2015c0-.828.895-1.5%202-1.5s2%20.672%202%201.5c0%20.356-.165.683-.441.94c-.297.276-.559.622-.559%201.027a1%201%200%200%200%201.03%201.005q2.007-.075%203.961-.337a.75.75%200%200%200%20.644-.644q.263-1.954.337-3.961A1%201%200%200%200%2016.967%2012c-.405%200-.75.262-1.027.559c-.257.276-.584.441-.94.441c-.828%200-1.5-.895-1.5-2s.672-2%201.5-2c.362%200%20.694.17.953.455c.265.291.601.545.995.545a.97.97%200%200%200%20.976-1.024a41%2041%200%200%200-.318-3.184a.75.75%200%200%200-.842-.64q-1.842.247-3.734.319A.997.997%200%200%201%2012%204.467%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%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%204.467c0-.405.262-.75.559-1.027c.276-.257.441-.584.441-.94c0-.828-.895-1.5-2-1.5s-2%20.672-2%201.5c0%20.362.171.694.456.953c.29.265.544.6.544.994a.97.97%200%200%201-1.024.974a40%2040%200%200%201-3.014-.306a.75.75%200%200%200-.847.847q.21%201.49.306%203.014A.97.97%200%200%201%204.447%2010c-.393%200-.729-.253-.994-.544C3.194%209.17%202.862%209%202.5%209C1.672%209%201%209.895%201%2011s.672%202%201.5%202c.356%200%20.683-.165.94-.441c.276-.297.622-.559%201.027-.559a.997.997%200%200%201%201.004%201.03a40%2040%200%200%201-.319%203.734a.75.75%200%200%200%20.64.842q1.575.219%203.184.318A.97.97%200%200%200%2010%2016.948c0-.394-.254-.73-.545-.995C9.171%2015.693%209%2015.362%209%2015c0-.828.895-1.5%202-1.5s2%20.672%202%201.5c0%20.356-.165.683-.441.94c-.297.276-.559.622-.559%201.027a1%201%200%200%200%201.03%201.005q2.007-.075%203.961-.337a.75.75%200%200%200%20.644-.644q.263-1.954.337-3.961A1%201%200%200%200%2016.967%2012c-.405%200-.75.262-1.027.559c-.257.276-.584.441-.94.441c-.828%200-1.5-.895-1.5-2s.672-2%201.5-2c.362%200%20.694.17.953.455c.265.291.601.545.995.545a.97.97%200%200%200%20.976-1.024a41%2041%200%200%200-.318-3.184a.75.75%200%200%200-.842-.64q-1.842.247-3.734.319A.997.997%200%200%201%2012%204.467%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/heroicons/puzzle-piece-20-solid.svg?color=%231a73e8&size=48
