Puzzle icon

Sizes, weights and styles

Every glyphfox icon renders along three axes. The stroke grows a little below 24 px so small icons keep their presence.

Sizes

Weights

Styles

Copy the code

Pick a format. Each snippet uses the package entry point for that stack; the props work the same everywhere.

import { PuzzleIcon } from 'glyphfox/react';

<PuzzleIcon />

<script setup>
import { PuzzleIcon } from 'glyphfox/vue';
</script>

<template>
  <PuzzleIcon />
</template>

<script>
  import { PuzzleIcon } from 'glyphfox/svelte';
</script>

<PuzzleIcon />

import { GlyphFoxIcon, provideGlyphFox } from 'glyphfox-angular';

<gf-icon name="puzzle"></gf-icon>

<glyph-fox name="puzzle"></glyph-fox>

<script src="https://cdn.jsdelivr.net/npm/glyphfox@1"></script>

<glyph-fox name="puzzle"></glyph-fox>

<span class="gf-puzzle" aria-hidden="true"></span>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="glyphfox glyphfox-puzzle" aria-hidden="true"><path d="M3 8a2 2 0 0 1 2-2h3.5a2.5 2.5 0 1 1 4 0H16a1 1 0 0 1 1 1v3.5a2.5 2.5 0 1 1 0 4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/></svg>

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='glyphfox glyphfox-puzzle' aria-hidden='true'%3E%3Cpath d='M3 8a2 2 0 0 1 2-2h3.5a2.5 2.5 0 1 1 4 0H16a1 1 0 0 1 1 1v3.5a2.5 2.5 0 1 1 0 4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/%3E%3C/svg%3E

<!-- copy node_modules/glyphfox/dist/sprite.svg to your public folder -->
<svg width="24" height="24" aria-hidden="true">
  <use href="/sprite.svg#gf-puzzle"></use>
</svg>

<!-- main.js: import 'glyphfox/runtime'; -->
<i data-glyph="puzzle"></i>

import { renderToString } from 'glyphfox/core';
import iconPuzzle from 'glyphfox/icons/puzzle';

const svg = renderToString(iconPuzzle, { size: 24 });

// or, with every icon registered by name:
// import { toSvg } from 'glyphfox';
// toSvg('puzzle', { size: 24 });

Details

With a modifier badge

Add a badge in any corner with modifier or the name syntax. The icon is cut around the badge, so the result still passes the icon rules.

Use it in your stack

Guides with the install, the props and the pitfalls for each stack:

• React
• Vue
• Svelte
• Angular
• Lit and web components
• HTML and CDN
• Tailwind CSS
• SVG sprites