Pico Css アイコン

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

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

logos:pico-css

Pico Css アイコン(logos:pico-css)は、SVG Logos セットの無料 SVG アイコンです（作者: Gil Barbara）。 512 × 218 のグリッドで描かれています。 SVG Logos icons は CC0 ライセンスで公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。

アイコンセット: SVG Logos
作者: Gil Barbara
ライセンス: CC0-1.0
サイズ: 512 × 218
タグ: picocss

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="218" viewBox="0 0 512 218"><path fill="#ff9500" d="M482.7 73.402a2.7 2.7 0 0 0-1.558 1.558l-10.6 27.561c-.893 2.32-4.173 2.32-5.066 0l-10.6-27.56a2.7 2.7 0 0 0-1.559-1.559l-27.56-10.6c-2.319-.892-2.319-4.173 0-5.065l27.56-10.6a2.7 2.7 0 0 0 1.56-1.558l10.6-27.561c.892-2.32 4.172-2.32 5.065 0l10.6 27.56a2.7 2.7 0 0 0 1.558 1.559l27.561 10.6c2.319.892 2.319 4.173 0 5.065z"/><path fill="#ffbf00" d="M405.427 37.407c-.892 2.319-4.172 2.319-5.065 0l-3.817-9.926a2.7 2.7 0 0 0-1.56-1.558l-9.925-3.818c-2.318-.892-2.318-4.172 0-5.064l9.926-3.818a2.7 2.7 0 0 0 1.559-1.558l3.817-9.926c.893-2.319 4.173-2.319 5.065 0l3.818 9.926a2.7 2.7 0 0 0 1.558 1.558l9.926 3.818c2.318.892 2.318 4.172 0 5.064l-9.926 3.818a2.7 2.7 0 0 0-1.558 1.558zm21.655 69.909a2.7 2.7 0 0 0-1.559 1.558l-3.817 9.926c-.893 2.319-4.173 2.319-5.066 0l-3.817-9.926a2.7 2.7 0 0 0-1.559-1.558l-9.925-3.818c-2.319-.892-2.319-4.172 0-5.064l9.925-3.818a2.7 2.7 0 0 0 1.56-1.558l3.816-9.926c.893-2.319 4.173-2.319 5.066 0l3.817 9.926a2.7 2.7 0 0 0 1.559 1.558l9.926 3.818c2.318.892 2.318 4.172 0 5.064z"/><path fill="#2a3140" d="M0 217.63V80.242h28.727l1.76 18.056v119.33zm58.237-36.899q-12.117 0-20.325-6.084q-8.208-6.281-12.311-17.86q-4.104-11.58-4.104-27.478q0-16.094 4.104-27.477q4.104-11.58 12.311-17.664q8.208-6.28 20.325-6.28q13.68 0 23.646 6.28q9.966 6.084 15.243 17.664q5.277 11.383 5.277 27.477q0 15.897-5.277 27.478q-5.277 11.579-15.243 17.86q-9.967 6.084-23.646 6.084m-7.817-28.262q5.862 0 10.357-2.944q4.496-2.944 7.23-8.047q2.737-5.3 2.737-12.169t-2.54-11.972q-2.541-5.299-7.231-8.243q-4.496-2.944-10.358-2.944q-5.863 0-10.553 2.944q-4.495 2.943-7.035 8.243q-2.54 5.299-2.54 11.972q0 6.869 2.54 12.169q2.54 5.103 7.035 8.047q4.496 2.944 10.358 2.944m68.685 25.907V80.243h30.487v98.133zm15.243-110.695q-6.84 0-12.116-5.102q-5.08-5.3-5.081-12.169q0-7.261 5.081-12.168q5.276-5.103 12.116-5.103q7.036 0 12.117 5.103q5.08 4.906 5.08 12.168q0 6.87-5.08 12.169q-5.081 5.102-12.117 5.102m85.668 113.05q-15.635 0-27.945-6.476q-12.117-6.674-18.957-18.254q-6.84-11.775-6.84-26.692q0-15.112 6.84-26.692t18.761-18.057q12.116-6.672 27.75-6.673q15.048 0 27.556 7.655q12.506 7.654 17.978 22.178l-28.923 9.813q-2.15-4.71-7.23-7.654q-4.886-3.14-10.944-3.14t-10.749 2.943q-4.493 2.749-7.23 7.851q-2.54 5.103-2.541 11.776q.001 6.674 2.54 11.776q2.737 4.907 7.428 7.851q4.886 2.944 10.943 2.944t10.943-3.14t7.232-8.244l28.922 9.813q-5.668 14.722-18.174 22.572q-12.314 7.85-27.36 7.85m106.673 0q-15.438 0-27.359-6.476q-11.726-6.674-18.565-18.254q-6.645-11.579-6.645-26.692t6.645-26.692t18.369-18.057q11.921-6.672 26.97-6.673q15.437 0 27.163 6.673q11.922 6.477 18.565 18.057q6.645 11.58 6.645 26.692t-6.645 26.692t-18.37 18.254q-11.529 6.477-26.773 6.476m-.195-29.048q6.057 0 10.357-2.747q4.496-2.945 7.035-7.851q2.54-5.102 2.54-11.776q.001-6.673-2.735-11.58q-2.54-5.103-7.035-7.85q-4.496-2.944-10.358-2.944t-10.357 2.944q-4.494 2.748-7.036 7.85q-2.54 4.907-2.54 11.58q0 6.478 2.54 11.58t7.036 8.047q4.69 2.747 10.553 2.747"/></svg>

Pico Css アイコンの使い方

React

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

<Icon icon="logos:pico-css" width="24" />

Vue

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

<template>
  <Icon icon="logos:pico-css" width="24" />
</template>

Svelte

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

<Icon icon="logos:pico-css" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[logos--pico-css]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/logos -->
<div class="i-logos:pico-css"></div>

Web コンポーネント

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

<iconify-icon icon="logos:pico-css"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/logos/pico-css.svg" alt="Pico Css アイコン" width="24" height="24">

Pico Css アイコンのよくある質問

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

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

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

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

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

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

SVG Logos アイコンをすべて見る →