puzzle piece emoji

puzzle-piece from Fluent Emoji Flat by Microsoft Corporation · Default · Activities · MIT Free for personal and commercial use.

Name
puzzle-piece
Set
Fluent Emoji Flat
Style
Default
Category
Activities
Viewbox
32×32
License
MIT

The same emoji 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 High Contrastpuzzle-pieceHeroIconspuzzle-pieceLine Awesomepuzzle-pieceNoto Emojipuzzle-pieceOpenMojipuzzle-piecePhosphorpuzzle-pieceTwitter Emojipuzzle-pieceUnicons

More activities icons from Fluent Emoji Flat

1st-place-medal2nd-place-medal3rd-place-medaladmission-ticketsamerican-footballartist-palettebadmintonballoonbaseballbasketballbowlingboxing-glovebullseyecarp-streamerchess-pawnchristmas-treeclub-suitconfetti-ballcricket-gamecrystal-ballcurling-stonediamond-suitdiving-maskfield-hockey

Use the puzzle piece emoji

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><path fill="#d3d3d3" d="m23.623 21.425l.995.996a1.37 1.37 0 0 0 1.94 0l3.143-3.147a1.01 1.01 0 0 0 0-1.434l-5.83-5.837a.445.445 0 0 1 0-.637c.11-.11.26-.15.399-.12c.945.16 1.95-.12 2.676-.846a3.07 3.07 0 0 0-.03-4.362l-.856-.867l-.388.13a3.05 3.05 0 0 0-3.89 3.406c.02.15-.02.289-.129.398l-.02.02a.444.444 0 0 1-.636 0L15.167 3.3a1.01 1.01 0 0 0-1.433 0l-3.113 3.117c-.08.08-.14.17-.2.259l-.208-.21l-.737.738l1.144 1.145l.02.02c.279.279.657.428 1.045.408a3.06 3.06 0 0 1 2.457 1.056a3.07 3.07 0 0 1 0 4.004a3.06 3.06 0 0 1-4.477.17a3.01 3.01 0 0 1-.885-2.351c.02-.389-.12-.767-.398-1.046a.1.1 0 0 0-.03-.04l-.975-.976l-.427.438l.189.19a1.34 1.34 0 0 0-.697.378l-3.144 3.147a1.01 1.01 0 0 0 0 1.434l5.84 5.847c.18.179.18.458 0 .637a.43.43 0 0 1-.398.12a3.06 3.06 0 0 0-2.815.995a3.07 3.07 0 0 0-.01 4.014a3.05 3.05 0 0 0 4.477.16a3.06 3.06 0 0 0 .855-2.64a.46.46 0 0 1 .13-.398l.02-.02a.444.444 0 0 1 .636 0l5.8 5.806a1.01 1.01 0 0 0 1.433 0l3.114-3.117a1.37 1.37 0 0 0 0-1.942l-.02-.02l-.886-.887l-.388.389l.11.11a3.07 3.07 0 0 1-2.328-1.056a3.07 3.07 0 0 1 0-4.004a3.06 3.06 0 0 1 4.477-.17c.517.519.815 1.186.875 1.863l-.02-.02z"/><path fill="#c3ef3c" d="M21.77 4.91a3.05 3.05 0 0 0-1.014 2.789c.02.15-.02.289-.13.398l-.02.02a.444.444 0 0 1-.636 0L14.153 2.3a1.007 1.007 0 0 0-1.433 0L9.608 5.417a1.373 1.373 0 0 0 0 1.943l.03.02c.268.27.646.419 1.034.399a3.05 3.05 0 0 1 2.456 1.056a3.07 3.07 0 0 1 0 4.005a3.06 3.06 0 0 1-4.475.17a3.12 3.12 0 0 1-.885-2.362c.03-.389-.12-.777-.398-1.046a1.367 1.367 0 0 0-1.94 0L2.299 12.74a1.01 1.01 0 0 0 0 1.435l5.838 5.848a.446.446 0 0 1 0 .638a.43.43 0 0 1-.398.12a3.06 3.06 0 0 0-2.814.996a3.075 3.075 0 0 0-.01 4.015a3.05 3.05 0 0 0 4.475.16a3.06 3.06 0 0 0 .855-2.64a.46.46 0 0 1 .13-.4l.02-.02a.444.444 0 0 1 .636 0l5.798 5.81a1.007 1.007 0 0 0 1.432 0l3.112-3.12a1.373 1.373 0 0 0 0-1.942l-.02-.02a1.37 1.37 0 0 0-1.034-.399a3.05 3.05 0 0 1-2.456-1.056a3.07 3.07 0 0 1 0-4.005a3.06 3.06 0 0 1 4.475-.17c.646.648.945 1.505.885 2.352c-.02.389.12.767.398 1.046a1.367 1.367 0 0 0 1.94 0l3.142-3.148a1.01 1.01 0 0 0 0-1.435l-5.828-5.838a.446.446 0 0 1 0-.638c.11-.11.259-.15.398-.12a3.05 3.05 0 0 0 2.675-.846a3.063 3.063 0 0 0-.17-4.484c-1.153-.956-2.873-.956-4.007.03"/></g></svg>

React

import type { SVGProps } from "react";

export function FluentEmojiFlatPuzzlePiece(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><path fill="#d3d3d3" d="m23.623 21.425l.995.996a1.37 1.37 0 0 0 1.94 0l3.143-3.147a1.01 1.01 0 0 0 0-1.434l-5.83-5.837a.445.445 0 0 1 0-.637c.11-.11.26-.15.399-.12c.945.16 1.95-.12 2.676-.846a3.07 3.07 0 0 0-.03-4.362l-.856-.867l-.388.13a3.05 3.05 0 0 0-3.89 3.406c.02.15-.02.289-.129.398l-.02.02a.444.444 0 0 1-.636 0L15.167 3.3a1.01 1.01 0 0 0-1.433 0l-3.113 3.117c-.08.08-.14.17-.2.259l-.208-.21l-.737.738l1.144 1.145l.02.02c.279.279.657.428 1.045.408a3.06 3.06 0 0 1 2.457 1.056a3.07 3.07 0 0 1 0 4.004a3.06 3.06 0 0 1-4.477.17a3.01 3.01 0 0 1-.885-2.351c.02-.389-.12-.767-.398-1.046a.1.1 0 0 0-.03-.04l-.975-.976l-.427.438l.189.19a1.34 1.34 0 0 0-.697.378l-3.144 3.147a1.01 1.01 0 0 0 0 1.434l5.84 5.847c.18.179.18.458 0 .637a.43.43 0 0 1-.398.12a3.06 3.06 0 0 0-2.815.995a3.07 3.07 0 0 0-.01 4.014a3.05 3.05 0 0 0 4.477.16a3.06 3.06 0 0 0 .855-2.64a.46.46 0 0 1 .13-.398l.02-.02a.444.444 0 0 1 .636 0l5.8 5.806a1.01 1.01 0 0 0 1.433 0l3.114-3.117a1.37 1.37 0 0 0 0-1.942l-.02-.02l-.886-.887l-.388.389l.11.11a3.07 3.07 0 0 1-2.328-1.056a3.07 3.07 0 0 1 0-4.004a3.06 3.06 0 0 1 4.477-.17c.517.519.815 1.186.875 1.863l-.02-.02z"/><path fill="#c3ef3c" d="M21.77 4.91a3.05 3.05 0 0 0-1.014 2.789c.02.15-.02.289-.13.398l-.02.02a.444.444 0 0 1-.636 0L14.153 2.3a1.007 1.007 0 0 0-1.433 0L9.608 5.417a1.373 1.373 0 0 0 0 1.943l.03.02c.268.27.646.419 1.034.399a3.05 3.05 0 0 1 2.456 1.056a3.07 3.07 0 0 1 0 4.005a3.06 3.06 0 0 1-4.475.17a3.12 3.12 0 0 1-.885-2.362c.03-.389-.12-.777-.398-1.046a1.367 1.367 0 0 0-1.94 0L2.299 12.74a1.01 1.01 0 0 0 0 1.435l5.838 5.848a.446.446 0 0 1 0 .638a.43.43 0 0 1-.398.12a3.06 3.06 0 0 0-2.814.996a3.075 3.075 0 0 0-.01 4.015a3.05 3.05 0 0 0 4.475.16a3.06 3.06 0 0 0 .855-2.64a.46.46 0 0 1 .13-.4l.02-.02a.444.444 0 0 1 .636 0l5.798 5.81a1.007 1.007 0 0 0 1.432 0l3.112-3.12a1.373 1.373 0 0 0 0-1.942l-.02-.02a1.37 1.37 0 0 0-1.034-.399a3.05 3.05 0 0 1-2.456-1.056a3.07 3.07 0 0 1 0-4.005a3.06 3.06 0 0 1 4.475-.17c.646.648.945 1.505.885 2.352c-.02.389.12.767.398 1.046a1.367 1.367 0 0 0 1.94 0l3.142-3.148a1.01 1.01 0 0 0 0-1.435l-5.828-5.838a.446.446 0 0 1 0-.638c.11-.11.259-.15.398-.12a3.05 3.05 0 0 0 2.675-.846a3.063 3.063 0 0 0-.17-4.484c-1.153-.956-2.873-.956-4.007.03"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><path fill="#d3d3d3" d="m23.623 21.425l.995.996a1.37 1.37 0 0 0 1.94 0l3.143-3.147a1.01 1.01 0 0 0 0-1.434l-5.83-5.837a.445.445 0 0 1 0-.637c.11-.11.26-.15.399-.12c.945.16 1.95-.12 2.676-.846a3.07 3.07 0 0 0-.03-4.362l-.856-.867l-.388.13a3.05 3.05 0 0 0-3.89 3.406c.02.15-.02.289-.129.398l-.02.02a.444.444 0 0 1-.636 0L15.167 3.3a1.01 1.01 0 0 0-1.433 0l-3.113 3.117c-.08.08-.14.17-.2.259l-.208-.21l-.737.738l1.144 1.145l.02.02c.279.279.657.428 1.045.408a3.06 3.06 0 0 1 2.457 1.056a3.07 3.07 0 0 1 0 4.004a3.06 3.06 0 0 1-4.477.17a3.01 3.01 0 0 1-.885-2.351c.02-.389-.12-.767-.398-1.046a.1.1 0 0 0-.03-.04l-.975-.976l-.427.438l.189.19a1.34 1.34 0 0 0-.697.378l-3.144 3.147a1.01 1.01 0 0 0 0 1.434l5.84 5.847c.18.179.18.458 0 .637a.43.43 0 0 1-.398.12a3.06 3.06 0 0 0-2.815.995a3.07 3.07 0 0 0-.01 4.014a3.05 3.05 0 0 0 4.477.16a3.06 3.06 0 0 0 .855-2.64a.46.46 0 0 1 .13-.398l.02-.02a.444.444 0 0 1 .636 0l5.8 5.806a1.01 1.01 0 0 0 1.433 0l3.114-3.117a1.37 1.37 0 0 0 0-1.942l-.02-.02l-.886-.887l-.388.389l.11.11a3.07 3.07 0 0 1-2.328-1.056a3.07 3.07 0 0 1 0-4.004a3.06 3.06 0 0 1 4.477-.17c.517.519.815 1.186.875 1.863l-.02-.02z"/><path fill="#c3ef3c" d="M21.77 4.91a3.05 3.05 0 0 0-1.014 2.789c.02.15-.02.289-.13.398l-.02.02a.444.444 0 0 1-.636 0L14.153 2.3a1.007 1.007 0 0 0-1.433 0L9.608 5.417a1.373 1.373 0 0 0 0 1.943l.03.02c.268.27.646.419 1.034.399a3.05 3.05 0 0 1 2.456 1.056a3.07 3.07 0 0 1 0 4.005a3.06 3.06 0 0 1-4.475.17a3.12 3.12 0 0 1-.885-2.362c.03-.389-.12-.777-.398-1.046a1.367 1.367 0 0 0-1.94 0L2.299 12.74a1.01 1.01 0 0 0 0 1.435l5.838 5.848a.446.446 0 0 1 0 .638a.43.43 0 0 1-.398.12a3.06 3.06 0 0 0-2.814.996a3.075 3.075 0 0 0-.01 4.015a3.05 3.05 0 0 0 4.475.16a3.06 3.06 0 0 0 .855-2.64a.46.46 0 0 1 .13-.4l.02-.02a.444.444 0 0 1 .636 0l5.798 5.81a1.007 1.007 0 0 0 1.432 0l3.112-3.12a1.373 1.373 0 0 0 0-1.942l-.02-.02a1.37 1.37 0 0 0-1.034-.399a3.05 3.05 0 0 1-2.456-1.056a3.07 3.07 0 0 1 0-4.005a3.06 3.06 0 0 1 4.475-.17c.646.648.945 1.505.885 2.352c-.02.389.12.767.398 1.046a1.367 1.367 0 0 0 1.94 0l3.142-3.148a1.01 1.01 0 0 0 0-1.435l-5.828-5.838a.446.446 0 0 1 0-.638c.11-.11.259-.15.398-.12a3.05 3.05 0 0 0 2.675-.846a3.063 3.063 0 0 0-.17-4.484c-1.153-.956-2.873-.956-4.007.03"/></g></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%2032%2032%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23d3d3d3%22%20d%3D%22m23.623%2021.425l.995.996a1.37%201.37%200%200%200%201.94%200l3.143-3.147a1.01%201.01%200%200%200%200-1.434l-5.83-5.837a.445.445%200%200%201%200-.637c.11-.11.26-.15.399-.12c.945.16%201.95-.12%202.676-.846a3.07%203.07%200%200%200-.03-4.362l-.856-.867l-.388.13a3.05%203.05%200%200%200-3.89%203.406c.02.15-.02.289-.129.398l-.02.02a.444.444%200%200%201-.636%200L15.167%203.3a1.01%201.01%200%200%200-1.433%200l-3.113%203.117c-.08.08-.14.17-.2.259l-.208-.21l-.737.738l1.144%201.145l.02.02c.279.279.657.428%201.045.408a3.06%203.06%200%200%201%202.457%201.056a3.07%203.07%200%200%201%200%204.004a3.06%203.06%200%200%201-4.477.17a3.01%203.01%200%200%201-.885-2.351c.02-.389-.12-.767-.398-1.046a.1.1%200%200%200-.03-.04l-.975-.976l-.427.438l.189.19a1.34%201.34%200%200%200-.697.378l-3.144%203.147a1.01%201.01%200%200%200%200%201.434l5.84%205.847c.18.179.18.458%200%20.637a.43.43%200%200%201-.398.12a3.06%203.06%200%200%200-2.815.995a3.07%203.07%200%200%200-.01%204.014a3.05%203.05%200%200%200%204.477.16a3.06%203.06%200%200%200%20.855-2.64a.46.46%200%200%201%20.13-.398l.02-.02a.444.444%200%200%201%20.636%200l5.8%205.806a1.01%201.01%200%200%200%201.433%200l3.114-3.117a1.37%201.37%200%200%200%200-1.942l-.02-.02l-.886-.887l-.388.389l.11.11a3.07%203.07%200%200%201-2.328-1.056a3.07%203.07%200%200%201%200-4.004a3.06%203.06%200%200%201%204.477-.17c.517.519.815%201.186.875%201.863l-.02-.02z%22%2F%3E%3Cpath%20fill%3D%22%23c3ef3c%22%20d%3D%22M21.77%204.91a3.05%203.05%200%200%200-1.014%202.789c.02.15-.02.289-.13.398l-.02.02a.444.444%200%200%201-.636%200L14.153%202.3a1.007%201.007%200%200%200-1.433%200L9.608%205.417a1.373%201.373%200%200%200%200%201.943l.03.02c.268.27.646.419%201.034.399a3.05%203.05%200%200%201%202.456%201.056a3.07%203.07%200%200%201%200%204.005a3.06%203.06%200%200%201-4.475.17a3.12%203.12%200%200%201-.885-2.362c.03-.389-.12-.777-.398-1.046a1.367%201.367%200%200%200-1.94%200L2.299%2012.74a1.01%201.01%200%200%200%200%201.435l5.838%205.848a.446.446%200%200%201%200%20.638a.43.43%200%200%201-.398.12a3.06%203.06%200%200%200-2.814.996a3.075%203.075%200%200%200-.01%204.015a3.05%203.05%200%200%200%204.475.16a3.06%203.06%200%200%200%20.855-2.64a.46.46%200%200%201%20.13-.4l.02-.02a.444.444%200%200%201%20.636%200l5.798%205.81a1.007%201.007%200%200%200%201.432%200l3.112-3.12a1.373%201.373%200%200%200%200-1.942l-.02-.02a1.37%201.37%200%200%200-1.034-.399a3.05%203.05%200%200%201-2.456-1.056a3.07%203.07%200%200%201%200-4.005a3.06%203.06%200%200%201%204.475-.17c.646.648.945%201.505.885%202.352c-.02.389.12.767.398%201.046a1.367%201.367%200%200%200%201.94%200l3.142-3.148a1.01%201.01%200%200%200%200-1.435l-5.828-5.838a.446.446%200%200%201%200-.638c.11-.11.259-.15.398-.12a3.05%203.05%200%200%200%202.675-.846a3.063%203.063%200%200%200-.17-4.484c-1.153-.956-2.873-.956-4.007.03%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%2032%2032%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23d3d3d3%22%20d%3D%22m23.623%2021.425l.995.996a1.37%201.37%200%200%200%201.94%200l3.143-3.147a1.01%201.01%200%200%200%200-1.434l-5.83-5.837a.445.445%200%200%201%200-.637c.11-.11.26-.15.399-.12c.945.16%201.95-.12%202.676-.846a3.07%203.07%200%200%200-.03-4.362l-.856-.867l-.388.13a3.05%203.05%200%200%200-3.89%203.406c.02.15-.02.289-.129.398l-.02.02a.444.444%200%200%201-.636%200L15.167%203.3a1.01%201.01%200%200%200-1.433%200l-3.113%203.117c-.08.08-.14.17-.2.259l-.208-.21l-.737.738l1.144%201.145l.02.02c.279.279.657.428%201.045.408a3.06%203.06%200%200%201%202.457%201.056a3.07%203.07%200%200%201%200%204.004a3.06%203.06%200%200%201-4.477.17a3.01%203.01%200%200%201-.885-2.351c.02-.389-.12-.767-.398-1.046a.1.1%200%200%200-.03-.04l-.975-.976l-.427.438l.189.19a1.34%201.34%200%200%200-.697.378l-3.144%203.147a1.01%201.01%200%200%200%200%201.434l5.84%205.847c.18.179.18.458%200%20.637a.43.43%200%200%201-.398.12a3.06%203.06%200%200%200-2.815.995a3.07%203.07%200%200%200-.01%204.014a3.05%203.05%200%200%200%204.477.16a3.06%203.06%200%200%200%20.855-2.64a.46.46%200%200%201%20.13-.398l.02-.02a.444.444%200%200%201%20.636%200l5.8%205.806a1.01%201.01%200%200%200%201.433%200l3.114-3.117a1.37%201.37%200%200%200%200-1.942l-.02-.02l-.886-.887l-.388.389l.11.11a3.07%203.07%200%200%201-2.328-1.056a3.07%203.07%200%200%201%200-4.004a3.06%203.06%200%200%201%204.477-.17c.517.519.815%201.186.875%201.863l-.02-.02z%22%2F%3E%3Cpath%20fill%3D%22%23c3ef3c%22%20d%3D%22M21.77%204.91a3.05%203.05%200%200%200-1.014%202.789c.02.15-.02.289-.13.398l-.02.02a.444.444%200%200%201-.636%200L14.153%202.3a1.007%201.007%200%200%200-1.433%200L9.608%205.417a1.373%201.373%200%200%200%200%201.943l.03.02c.268.27.646.419%201.034.399a3.05%203.05%200%200%201%202.456%201.056a3.07%203.07%200%200%201%200%204.005a3.06%203.06%200%200%201-4.475.17a3.12%203.12%200%200%201-.885-2.362c.03-.389-.12-.777-.398-1.046a1.367%201.367%200%200%200-1.94%200L2.299%2012.74a1.01%201.01%200%200%200%200%201.435l5.838%205.848a.446.446%200%200%201%200%20.638a.43.43%200%200%201-.398.12a3.06%203.06%200%200%200-2.814.996a3.075%203.075%200%200%200-.01%204.015a3.05%203.05%200%200%200%204.475.16a3.06%203.06%200%200%200%20.855-2.64a.46.46%200%200%201%20.13-.4l.02-.02a.444.444%200%200%201%20.636%200l5.798%205.81a1.007%201.007%200%200%200%201.432%200l3.112-3.12a1.373%201.373%200%200%200%200-1.942l-.02-.02a1.37%201.37%200%200%200-1.034-.399a3.05%203.05%200%200%201-2.456-1.056a3.07%203.07%200%200%201%200-4.005a3.06%203.06%200%200%201%204.475-.17c.646.648.945%201.505.885%202.352c-.02.389.12.767.398%201.046a1.367%201.367%200%200%200%201.94%200l3.142-3.148a1.01%201.01%200%200%200%200-1.435l-5.828-5.838a.446.446%200%200%201%200-.638c.11-.11.259-.15.398-.12a3.05%203.05%200%200%200%202.675-.846a3.063%203.063%200%200%200-.17-4.484c-1.153-.956-2.873-.956-4.007.03%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent-emoji-flat/puzzle-piece.svg?color=%231a73e8&size=48