Puzzle アイコン

Q: Puzzle アイコンは商用利用でも無料ですか?

はい。Foundation icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。

foundation:puzzle

Puzzle アイコン(foundation:puzzle)は、Foundation セットの無料 SVG アイコンです（作者: Zurb）。 100 × 100 のグリッドで描かれています。 Foundation icons は MIT ライセンスで公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。

アイコンセット: Foundation
作者: Zurb
ライセンス: MIT
サイズ: 100 × 100

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="currentColor" d="M78.589 48.774V35.887h-.001a3.967 3.967 0 0 0-3.87-3.953v-.038H62.666c-.059.002-.115.018-.175.018s-.116-.016-.175-.018h-.203v-.021c-2.8-.198-5.016-2.508-5.016-5.356c0-1.236.432-2.361 1.131-3.271h-.106a8.17 8.17 0 0 0 1.098-4.092a8.22 8.22 0 0 0-8.223-8.221a8.22 8.22 0 0 0-8.221 8.221c0 1.491.403 2.886 1.098 4.092h-.091a5.35 5.35 0 0 1 1.117 3.256c0 2.847-2.216 5.157-5.017 5.354v.038H25.361v.02a3.97 3.97 0 0 0-3.955 3.971c0 .058.015.112.017.17v13.421h.043a2.245 2.245 0 0 0 2.243 2.244c.226 0 .44-.045.645-.109a9.7 9.7 0 0 1 3.883-.808c5.393 0 9.764 4.371 9.764 9.762c0 5.392-4.371 9.762-9.764 9.762a9.7 9.7 0 0 1-3.788-.763a2.2 2.2 0 0 0-.769-.144a2.24 2.24 0 0 0-2.242 2.244c0 .127.017.25.038.372h-.053v12.884c-.003.058-.017.112-.017.17a3.975 3.975 0 0 0 3.973 3.973c.109 0 .212-.023.319-.032H38.89a2.245 2.245 0 0 0 2.244-2.246c0-.248-.05-.481-.124-.704l-.004-.014c-.017-.051-.027-.106-.048-.155h.008a9.8 9.8 0 0 1-.397-2.741a9.76 9.76 0 0 1 9.762-9.762a9.76 9.76 0 0 1 9.762 9.762a9.8 9.8 0 0 1-.397 2.741h.025a2.245 2.245 0 0 0 2.066 3.123l.038-.004h12.792a3.974 3.974 0 0 0 3.969-3.933h.005V72.038h-.046a2.234 2.234 0 0 0-2.216-1.964v-.099a9.8 9.8 0 0 1-2.567.353c-5.392 0-9.763-4.37-9.763-9.762c0-5.391 4.371-9.762 9.763-9.762c.89 0 1.748.129 2.567.353v-.094l.025.002c1.01 0 1.853-.67 2.134-1.588h.103v-.605c0-.017.005-.032.005-.049z"/></svg>

Puzzle アイコンの使い方

React

import { Icon } from "@iconify/react";

<Icon icon="foundation:puzzle" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="foundation:puzzle" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="foundation:puzzle" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[foundation--puzzle]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/foundation -->
<div class="i-foundation:puzzle"></div>

Web コンポーネント

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="foundation:puzzle"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/foundation/puzzle.svg" alt="Puzzle アイコン" width="24" height="24">

他のアイコンセットの Puzzle アイコン

Puzzle アイコンのよくある質問

Puzzle アイコンは商用利用でも無料ですか?

はい。Foundation icons は MIT ライセンスで公開されており、個人・商用プロジェクトで利用できます。

React で Puzzle アイコンを使うには?

@iconify/react をインストールして <Icon icon="foundation:puzzle" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。

Puzzle アイコンをウェブページに追加するには?

画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/foundation/puzzle.svg" alt="Puzzle アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。

Foundation アイコンをすべて見る →