Puzzle Cube Piece icon
Used to represent complex problems that need layered actions to solve. The Puzzle Cube Piece icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Puzzle Cube Piece icon in React
Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.
npm install @fluentui/react-icons
import { PuzzleCubePiece24Regular, PuzzleCubePiece24Filled } from "@fluentui/react-icons";
export function Example() {
return <PuzzleCubePiece24Regular aria-label="Puzzle Cube Piece" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_puzzle_cube_piece_24_regular.svg" width="24" height="24" alt="Puzzle Cube Piece"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 9.49999H19V17.75C19 19.5449 17.5449 21 15.75 21H6.25001C4.45512 21 3.00007 19.5449 3 17.75V8.24999C3 6.45506 4.45508 4.99999 6.25001 4.99999H14.5V9.49999ZM4.5 17.75C4.50008 18.7164 5.28355 19.5 6.25001 19.5H7.50001V16.5H4.5V17.75ZM9.00001 19.5H13V16.5H9.00001V19.5ZM14.5 19.5H15.75C16.7165 19.5 17.5 18.7164 17.5 17.75V16.5H14.5V19.5ZM4.5 15H7.50001V11H4.5V15ZM9.00001 15H13V11H9.00001V15ZM14.5 15H17.5V11H14.5V15ZM6.25001 6.49999C5.28351 6.49999 4.5 7.28349 4.5 8.24999V9.49999H7.50001V6.49999H6.25001ZM9.00001 9.49999H13V6.49999H9.00001V9.49999ZM18.6153 1.6162C19.1035 1.12808 19.8956 1.12812 20.3838 1.6162L22.3828 3.61522C22.8709 4.10332 22.871 4.89474 22.3828 5.3828L20.3838 7.38182C19.8956 7.8698 19.1035 7.8698 18.6153 7.38182L16.6162 5.3828C16.1281 4.89474 16.1281 4.10334 16.6162 3.61522L18.6153 1.6162ZM17.8535 4.49901L19.5 6.14452L21.1455 4.49901L19.4991 2.8535L17.8535 4.49901Z" fill="currentColor"/></svg>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/puzzle_cube_piece_24_regular.svg";Details
| Name | Puzzle Cube Piece |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_puzzle_cube_piece_24_regular.svg |
| Filled file | ic_fluent_puzzle_cube_piece_24_filled.svg |
| React components | PuzzleCubePiece24Regular, PuzzleCubePiece24Filled |
| License | MIT (© Microsoft Corporation) |