Hover the icon or press Play. Suggested motion: pop. Pick another to preview it and update the animated code:
Puzzle Outline icon
A free puzzle outline icon from Typicons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.
- License
- CC BY-SA 3.0 license
- Project
- s-ings.com
npx shadcn@latest add https://ui.cuelark.com/r/icons/typicons/puzzle-outline.jsonimport * as React from "react";
/**
* Puzzle Outline from Typicons (http://s-ings.com/typicons/), CC BY-SA 3.0.
* Via Cuelark UI: ui.cuelark.com/icons/typicons/puzzle-outline. Sized in em, colored by currentColor.
*/
export function TiPuzzleOutlineIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
aria-hidden="true"
version="1.2"
baseProfile="tiny"
viewBox="0 0 24 24"
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M20 11.25v-1.75c0-1.93-1.57-3.5-3.5-3.5h-.759c-.141-1.982-1.953-3.5-4.241-3.5s-4.1 1.518-4.241 3.5h-.759c-1.93 0-3.5 1.57-3.5 3.5v1.75c0 1.012.514 1.847 1.295 2.246-.358.188-.668.469-.894.825-.262.414-.401.908-.401 1.429v2.75c0 1.93 1.57 3.5 3.5 3.5h2.75c.976 0 1.831-.497 2.242-1.299l.036.066c.435.772 1.266 1.233 2.222 1.233h2.75c1.93 0 3.5-1.57 3.5-3.5v-2.75c0-1.013-.515-1.849-1.297-2.247.776-.411 1.297-1.256 1.297-2.253zm-2 7.25c0 .825-.675 1.5-1.5 1.5h-2.75c-.356 0-.724-.216-.391-.766.246-.28.391-.619.391-.984 0-.967-1.007-1.75-2.25-1.75s-2.25.783-2.25 1.75c0 .3.095.576.255.823.507.673.136.927-.255.927h-2.75c-.825 0-1.5-.675-1.5-1.5v-2.75c0-.258.113-.521.384-.521.104 0 .229.039.382.13.28.246.62.391.984.391.966 0 1.75-1.008 1.75-2.25s-.784-2.25-1.75-2.25c-.3 0-.576.095-.822.255-.237.171-.422.243-.562.243-.26 0-.366-.245-.366-.498v-1.75c0-.825.675-1.5 1.5-1.5h2.75c.391 0 .762-.254.243-.927-.148-.247-.243-.523-.243-.823 0-.967 1.007-1.75 2.25-1.75s2.25.783 2.25 1.75c0 .365-.145.704-.391.984-.333.55.035.766.391.766h2.75c.825 0 1.5.675 1.5 1.5v1.75c0 .258-.113.521-.384.521-.104 0-.229-.039-.382-.13-.28-.246-.62-.391-.984-.391-.966 0-1.75 1.008-1.75 2.25s.784 2.25 1.75 2.25c.3 0 .576-.095.822-.255.237-.171.422-.244.562-.243.259 0 .365.245.365.498v2.75zm-13-5.806c.116.032.236.054.365.054.342 0 .683-.119 1.038-.364l.069-.041c.097-.063.188-.093.278-.093.354 0 .75.535.75 1.25s-.396 1.25-.75 1.25c-.108 0-.217-.048-.324-.142l-.143-.104c-.301-.183-.604-.275-.899-.275-.134 0-.261.023-.384.059v-1.594zm12.635 1.558c-.342 0-.683.119-1.038.364l-.069.041c-.097.063-.188.093-.277.093-.354 0-.75-.535-.75-1.25s.396-1.25.75-1.25c.108 0 .217.048.324.142l.143.104c.302.183.604.275.899.275.136 0 .262-.025.384-.062v1.597c-.117-.032-.237-.054-.366-.054zm-6.943 5.748c.101-.346.093-.816-.305-1.396l-.044-.074c-.062-.098-.094-.189-.094-.279 0-.354.534-.75 1.25-.75s1.25.396 1.25.75c0 .108-.048.217-.143.325l-.104.142c-.325.537-.311.979-.22 1.284h-1.59z"
/>
</svg>
);
}import { TiPuzzleOutline } from "react-icons/ti";
export function Example() {
return <TiPuzzleOutline className="size-5" />;
}<svg
version="1.2"
baseProfile="tiny"
viewBox="0 0 24 24"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20 11.25v-1.75c0-1.93-1.57-3.5-3.5-3.5h-.759c-.141-1.982-1.953-3.5-4.241-3.5s-4.1 1.518-4.241 3.5h-.759c-1.93 0-3.5 1.57-3.5 3.5v1.75c0 1.012.514 1.847 1.295 2.246-.358.188-.668.469-.894.825-.262.414-.401.908-.401 1.429v2.75c0 1.93 1.57 3.5 3.5 3.5h2.75c.976 0 1.831-.497 2.242-1.299l.036.066c.435.772 1.266 1.233 2.222 1.233h2.75c1.93 0 3.5-1.57 3.5-3.5v-2.75c0-1.013-.515-1.849-1.297-2.247.776-.411 1.297-1.256 1.297-2.253zm-2 7.25c0 .825-.675 1.5-1.5 1.5h-2.75c-.356 0-.724-.216-.391-.766.246-.28.391-.619.391-.984 0-.967-1.007-1.75-2.25-1.75s-2.25.783-2.25 1.75c0 .3.095.576.255.823.507.673.136.927-.255.927h-2.75c-.825 0-1.5-.675-1.5-1.5v-2.75c0-.258.113-.521.384-.521.104 0 .229.039.382.13.28.246.62.391.984.391.966 0 1.75-1.008 1.75-2.25s-.784-2.25-1.75-2.25c-.3 0-.576.095-.822.255-.237.171-.422.243-.562.243-.26 0-.366-.245-.366-.498v-1.75c0-.825.675-1.5 1.5-1.5h2.75c.391 0 .762-.254.243-.927-.148-.247-.243-.523-.243-.823 0-.967 1.007-1.75 2.25-1.75s2.25.783 2.25 1.75c0 .365-.145.704-.391.984-.333.55.035.766.391.766h2.75c.825 0 1.5.675 1.5 1.5v1.75c0 .258-.113.521-.384.521-.104 0-.229-.039-.382-.13-.28-.246-.62-.391-.984-.391-.966 0-1.75 1.008-1.75 2.25s.784 2.25 1.75 2.25c.3 0 .576-.095.822-.255.237-.171.422-.244.562-.243.259 0 .365.245.365.498v2.75zm-13-5.806c.116.032.236.054.365.054.342 0 .683-.119 1.038-.364l.069-.041c.097-.063.188-.093.278-.093.354 0 .75.535.75 1.25s-.396 1.25-.75 1.25c-.108 0-.217-.048-.324-.142l-.143-.104c-.301-.183-.604-.275-.899-.275-.134 0-.261.023-.384.059v-1.594zm12.635 1.558c-.342 0-.683.119-1.038.364l-.069.041c-.097.063-.188.093-.277.093-.354 0-.75-.535-.75-1.25s.396-1.25.75-1.25c.108 0 .217.048.324.142l.143.104c.302.183.604.275.899.275.136 0 .262-.025.384-.062v1.597c-.117-.032-.237-.054-.366-.054zm-6.943 5.748c.101-.346.093-.816-.305-1.396l-.044-.074c-.062-.098-.094-.189-.094-.279 0-.354.534-.75 1.25-.75s1.25.396 1.25.75c0 .108-.048.217-.143.325l-.104.142c-.325.537-.311.979-.22 1.284h-1.59z"
/>
</svg>"Puzzle Outline" icon from Typicons (http://s-ings.com/typicons/), licensed under CC BY-SA 3.0 license.Related icons: plugin, extension, integration, addon
- anchor outline
- arrow back outline
- arrow down outline
- arrow forward outline
- arrow left outline
- arrow loop outline
- arrow maximise outline
- arrow minimise outline
- arrow move outline
- arrow repeat outline
- arrow right outline
- arrow sync outline
- arrow up outline
- attachment outline
- backspace outline
- calendar outline
- camera outline
- cancel outline
- chart area outline
- chart bar outline
- chart line outline
- chart pie outline
- chevron left outline
- chevron right outline