Codepen アイコン

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

はい。Brandico icons は CC BY SA ライセンス で公開されています。作者のクレジットを表記し、アイコンへの変更を同じライセンスで共有すれば、個人・商用プロジェクトで利用できます。

brandico:codepen

Codepen アイコン(brandico:codepen)は、Brandico セットの無料 SVG アイコンです（作者: Fontello）。 988 × 1000 のグリッドで描かれています。 Brandico icons は CC BY SA ライセンスで公開されています。作者のクレジットを表記し、アイコンへの変更を同じライセンスで共有すれば、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。

アイコンセット: Brandico
作者: Fontello
ライセンス: CC-BY-SA-3.0
サイズ: 988 × 1000

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="988" height="1000" viewBox="0 0 988 1000"><path fill="currentColor" d="M987.672 343.936c-.09-.624-.246-1.221-.35-1.845c-.21-1.196-.43-2.392-.742-3.561c-.183-.702-.442-1.377-.662-2.052c-.339-1.04-.675-2.079-1.091-3.092c-.289-.702-.625-1.404-.948-2.079a33 33 0 0 0-1.443-2.806c-.39-.677-.805-1.327-1.208-1.976a38 38 0 0 0-1.796-2.575a49 49 0 0 0-1.454-1.845a39 39 0 0 0-2.119-2.287c-.556-.57-1.104-1.143-1.689-1.663a51 51 0 0 0-2.402-2.026c-.635-.494-1.261-.988-1.923-1.456c-.249-.156-.465-.364-.701-.521L517.575 13.108a42.44 42.44 0 0 0-47.102 0L18.906 314.152c-.233.156-.454.364-.7.521c-.664.467-1.288.961-1.911 1.456a39 39 0 0 0-2.403 2.026c-.598.521-1.143 1.093-1.704 1.663a37 37 0 0 0-2.104 2.287c-.506.599-1 1.223-1.469 1.845a38 38 0 0 0-1.78 2.575a37 37 0 0 0-1.221 1.976a41 41 0 0 0-1.444 2.806c-.324.675-.662 1.377-.948 2.079c-.416 1.013-.753 2.052-1.091 3.092c-.221.675-.468 1.351-.664 2.052c-.311 1.169-.519 2.365-.74 3.561c-.103.624-.26 1.221-.338 1.845A41 41 0 0 0 0 349.472v301.045c0 1.87.142 3.716.389 5.562c.078.599.235 1.221.338 1.816c.221 1.197.429 2.392.74 3.562c.196.702.443 1.377.664 2.053c.337 1.038.675 2.079 1.091 3.117c.286.705.624 1.38.948 2.056c.456.958.923 1.893 1.444 2.831c.389.651.792 1.297 1.221 1.949a38 38 0 0 0 1.78 2.575c.469.648.963 1.247 1.469 1.843c.664.778 1.366 1.56 2.104 2.288c.561.569 1.106 1.142 1.704 1.66a38 38 0 0 0 2.403 2.029a41 41 0 0 0 1.911 1.454c.246.156.467.366.7.519l451.567 301.047a42.45 42.45 0 0 0 23.558 7.146a42.45 42.45 0 0 0 23.544-7.146l451.568-301.047c.236-.152.452-.362.701-.519c.662-.466 1.288-.958 1.923-1.454a48 48 0 0 0 2.402-2.029c.585-.519 1.134-1.091 1.689-1.66a39 39 0 0 0 2.119-2.288a33 33 0 0 0 1.454-1.843a38 38 0 0 0 1.796-2.575c.403-.652.818-1.298 1.208-1.949c.532-.938.998-1.873 1.443-2.831c.323-.676.659-1.351.948-2.056c.416-1.038.752-2.079 1.091-3.117c.22-.676.479-1.351.662-2.053c.312-1.171.532-2.365.742-3.562c.104-.596.26-1.218.35-1.816c.232-1.847.379-3.692.379-5.562V349.471a43 43 0 0 0-.378-5.535M536.484 127.768l332.657 221.755l-148.588 99.403l-184.069-123.13zm-84.917 0v198.028l-184.06 123.13l-148.599-99.403zM84.916 428.943l106.226 71.05l-106.226 71.054zm366.651 443.278L118.908 650.464l148.599-99.377l184.06 123.105zm42.464-271.783L343.86 499.993L494.031 399.55L644.19 499.993zm42.453 271.783V674.192l184.069-123.105l148.588 99.377zm366.648-301.174l-106.213-71.054l106.213-71.05z"/></svg>

Codepen アイコンの使い方

React

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

<Icon icon="brandico:codepen" width="24" />

Vue

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

<template>
  <Icon icon="brandico:codepen" width="24" />
</template>

Svelte

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

<Icon icon="brandico:codepen" width="24" />

Tailwind CSS

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

UnoCSS

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

Web コンポーネント

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

<iconify-icon icon="brandico:codepen"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/brandico/codepen.svg" alt="Codepen アイコン" width="24" height="24">

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

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

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

はい。Brandico icons は CC BY SA ライセンスで公開されています。作者のクレジットを表記し、アイコンへの変更を同じライセンスで共有すれば、個人・商用プロジェクトで利用できます。

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

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

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

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

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