outline
1. カラー
新しい色を選択するまで、アイコンの元の色がそのまま保持されます。
2. キャンバス背景と変形
3. ベクターアニメーションのプリセット
SVG書き出しに含まれます
Codepen SVGアイコン
出典、作者、ライセンスはプレビューとアイコン詳細で確認できます。 Codepen - 所有者の商標です — ブランドへの言及のみに使用してください. 登録不要 | 100%ブラウザ完結処理
商標に関する通知
このロゴは所有者の商標です。このファイルは、記事、レビュー、ガイドなどでそのブランドに言及する場合にのみ使用してください。推奨、提携、関連を示唆する使い方はせず、自分のロゴとして販売または再配布しないでください。
MIT - ファイルライセンスはSVGファイルのみに適用されます — 商標権は含まれません
開発者とUIフレームワーク向けのクイックコピー
コードのリアルタイム出力
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="36" height="36" fill="currentColor" role="img" aria-label="Codepen icon"><title>Codepen - Authentic Brand Logos icon</title><desc>Free Codepen vector icon from the Authentic Brand Logos open-source icon library; brand style, MIT licence, viewBox 0 0 128 128, 697 bytes.</desc><path d="m125.571 39.926-58.5-39c-1.997-1.23-4.128-1.24-6.142 0l-58.5 39C.929 40.926 0 42.712 0 44.497v39c0 1.786.929 3.572 2.429 4.571l58.5 39.006c1.996 1.229 4.128 1.24 6.142 0l58.5-39.006c1.5-.999 2.429-2.785 2.429-4.57v-39c0-1.786-.929-3.572-2.429-4.572zm-56.07-24.144 43.07 28.715-19.214 12.858L69.5 41.425V15.784zm-11.001 0v25.644L34.642 57.354 15.428 44.498 58.5 15.782zm-47.5 39 13.786 9.215L11 73.212v-18.43zm47.5 57.43L15.428 83.497 34.642 70.64 58.5 86.569v25.643zM64 76.997l-19.428-13 19.428-13 19.428 13-19.428 13zm5.5 35.215V86.569L93.357 70.64l19.214 12.857-43.07 28.715zm47.5-39-13.786-9.215L117 54.783v18.429z"/></svg>
出典とライセンスの確認
LICENSE.txt
Library: Authentic Brand Logos |
Author: theSVG contributors (@thesvg/icons) |
License: MIT
| Source: https://github.com/glincker/thesvg
| Package: @thesvg/icons/codepen
| 登録不要 | 100%ブラウザ完結処理
キーワード
#codepen
#authentic
#brand
#logos
#brands
Codepen - ベクターの技術仕様
出典、作者、ライセンスはプレビューとアイコン詳細で確認できます。 Codepen
| 正規の識別子 | authentic-brand-logos/codepen |
|---|---|
| 元のライブラリパック | Authentic Brand Logos |
| 座標グリッドと viewBox | viewBox="0 0 128 128" |
| 非圧縮のサイズ | 980 bytes (~539 bytes gzipped) |
| SPDXライセンスと商用利用 | MIT - ファイルライセンスはSVGファイルのみに適用されます — 商標権は含まれません |
| Upstream Source | https://github.com/glincker/thesvg (@thesvg/icons/codepen) |
| 対応する書き出し形式 | SVG, PNG (32px-2048px), WebP, ICO, React TSX, Vue 3, Svelte, Tailwind CSS, CSS Mask, Base64 |
| 安全とプライバシーの保証 | 登録不要 | 100%ブラウザ完結処理 |
このアイコンの使い方と調整方法: Codepen
- 見た目を調整する: カラー, 自動（線と塗り）, 線の太さ (
0.5px-4px), ベクターアニメーションのプリセット - ベクターまたは画像を保存する: SVGをダウンロード, PNG（透明）, WebP（最適化） (
2048x2048 px) - フレームワークのコードをコピーする: React、Next.js、Vue 3、Svelte、Angular、HTML、CSSマスク用のコードをそのままコピーできます。
- 高度なベクター編集: SVGエディターで編集 (77,087)
アクセシビリティのヒント (WCAG 2.1): 飾りのアイコンは aria-hidden と focusable false で隠します。アイコンだけのボタンには分かりやすい aria-label を付けます。右から左に書く言語では矢印を左右反転します。
codepen.svg aria-hidden="true" focusable="false"
他のライブラリの同じアイコン ("Codepen")
このアイコンを他のオープンソースベクターライブラリと比較できます。
同じカテゴリの ブランド＆テックロゴ
見るoutline
Codepen
MingCute Icons|interfacesolid
Codepen
MingCute Icons Fill|interfacebrand
Codepen
selfh.st Icons|brandsoutline
Brand Codepen
Tabler Icons|brandsbrand
Msgvault Dark
selfh.st Icons|brandsbrand
Mysql Dark
selfh.st Icons|brands
Mastodon Logo
Phosphor Icons|brands
Pix Logo
Phosphor Icons|brands
Spotify Logo
Phosphor Icons|brands
Agentvoice
LobeHub Icons|brands
Cplusplus
Devicon|brands
Acars Hub
Dashboard Icons|brands
Aimass Text
LobeHub Icons|brands
Airjelly
LobeHub Icons|brands
Leetcode
Devicon|brands
Aliyun
Dashboard Icons|brands
Iconify
Simple Icons|brands
Railway
Devicon|brands
Anything Llm
Dashboard Icons|brands
Root
Simple Icons|brands
Brand Kick
Tabler Icons|brands
Brand Apple
3D Vector Icons|brands
Brand Elixir
3D Vector Icons|brands
Brand Gmail
3D Vector Icons|brandsさらに見る
よくある質問
Codepen - よくある質問
Codepenはどの形式でダウンロードできますか？ +
Codepenはbrandスタイルのベクターです（viewBox 0 0 128 128）。SVG、PNG、WebP、ICOをダウンロードするか、このページからReact TSX、Vue 3、Svelte、Tailwind CSS、CSS Mask、Base64コードをコピーできます。
Codepenアイコンはどこから来たのですか？ +
CodepenはAuthentic Brand Logosライブラリの一部です。作者はtheSVG contributors (@thesvg/icons)、カテゴリはブランド＆テックロゴです。ライセンス全文は、このページにリンクされたライブラリ通知ファイルにあります。
100%ブラウザ完結処理 | 77,087 アイコン
SVGエディター
パス、レイヤー、色、アニメーションをブラウザで編集し、整ったSVG、PNG、またはフレームワークのコードを書き出せます。