Proton Pass アイコン
thesvg-color:proton-pass
Proton Pass アイコン(thesvg-color:proton-pass)は、theSVG Color セットの無料 SVG アイコンです（作者: thesvg.org）。 36 × 36 のグリッドで描かれています。 theSVG Color icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- theSVG Color
- 作者
- thesvg.org
- ライセンス
- MIT
- サイズ
- 36 × 36
- タグ
- protonpass
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><g fill="none"><g clip-path="url(#SVG3M9xbd8S)"><path fill="url(#SVG6eIjLcBa)" d="M10.826 4.548C13.336 2.036 14.592.78 16.04.31a6.34 6.34 0 0 1 3.92 0c1.448.47 2.703 1.726 5.214 4.238l6.278 6.278c2.512 2.51 3.767 3.766 4.238 5.214a6.34 6.34 0 0 1 0 3.92c-.47 1.447-1.726 2.703-4.238 5.214l-6.278 6.278c-2.51 2.512-3.766 3.767-5.214 4.238a6.34 6.34 0 0 1-3.92 0c-1.447-.47-2.703-1.726-5.214-4.238l-1.18-1.323c-.715-.8-1.072-1.201-1.327-1.657a4.8 4.8 0 0 1-.492-1.29c-.113-.509-.113-1.045-.113-2.118V10.936c0-1.073 0-1.609.113-2.118c.1-.452.266-.887.492-1.29c.255-.456.612-.856 1.326-1.657z"/><path fill="url(#SVGpcEtXcma)" d="M10.826 4.548C13.336 2.036 14.592.78 16.04.31a6.34 6.34 0 0 1 3.92 0c1.448.47 2.703 1.726 5.214 4.238l6.278 6.278c2.512 2.51 3.767 3.766 4.238 5.214a6.34 6.34 0 0 1 0 3.92c-.47 1.447-1.726 2.703-4.238 5.214l-6.278 6.278c-2.51 2.512-3.766 3.767-5.214 4.238a6.34 6.34 0 0 1-3.92 0c-1.447-.47-2.703-1.726-5.214-4.238l-1.18-1.323c-.715-.8-1.072-1.201-1.327-1.657a4.8 4.8 0 0 1-.492-1.29c-.113-.509-.113-1.045-.113-2.118V10.936c0-1.073 0-1.609.113-2.118c.1-.452.266-.887.492-1.29c.255-.456.612-.856 1.326-1.657z"/><path fill="url(#SVGEx5XEciR)" d="M10.377 4.996c1.256-1.256 1.884-1.884 2.608-2.119a3.17 3.17 0 0 1 1.96 0c.723.235 1.35.863 2.607 2.119l9.416 9.416c1.256 1.256 1.884 1.884 2.119 2.608a3.17 3.17 0 0 1 0 1.96c-.235.723-.863 1.351-2.119 2.607l-9.416 9.416c-1.256 1.256-1.884 1.884-2.608 2.12a3.17 3.17 0 0 1-1.96 0c-.723-.236-1.351-.864-2.607-2.12l-5.83-5.829C2.038 22.663.782 21.407.31 19.96a6.34 6.34 0 0 1 0-3.919c.47-1.448 1.726-2.704 4.238-5.215z"/></g><defs><radialGradient id="SVG6eIjLcBa" cx="0" cy="0" r="1" gradientTransform="rotate(-58.142 38.442 8.58)scale(30.0512 46.9939)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffd580"/><stop offset=".094" stop-color="#f6c592"/><stop offset=".205" stop-color="#ebb6a2"/><stop offset=".324" stop-color="#dfa5af"/><stop offset=".429" stop-color="#d397be"/><stop offset=".534" stop-color="#c486cb"/><stop offset=".649" stop-color="#b578d9"/><stop offset=".771" stop-color="#a166e5"/><stop offset=".891" stop-color="#8b57f2"/><stop offset="1" stop-color="#704cff"/></radialGradient><radialGradient id="SVGEx5XEciR" cx="0" cy="0" r="1" gradientTransform="rotate(-58.142 33.83 9.124)scale(24.1716 37.7995)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffd580"/><stop offset=".094" stop-color="#f6c592"/><stop offset=".205" stop-color="#ebb6a2"/><stop offset=".324" stop-color="#dfa5af"/><stop offset=".429" stop-color="#d397be"/><stop offset=".534" stop-color="#c486cb"/><stop offset=".649" stop-color="#b578d9"/><stop offset=".771" stop-color="#a166e5"/><stop offset=".891" stop-color="#8b57f2"/><stop offset="1" stop-color="#704cff"/></radialGradient><linearGradient id="SVGpcEtXcma" x1="9.625" x2="16.626" y1="-7.148" y2="35.587" gradientUnits="userSpaceOnUse"><stop stop-color="#6d4aff"/><stop offset=".392" stop-color="#b39ffb" stop-opacity=".978"/><stop offset="1" stop-color="#ffe8db" stop-opacity=".8"/></linearGradient><clipPath id="SVG3M9xbd8S"><path fill="#fff" d="M0 0h36v36H0z"/></clipPath></defs></g></svg>Proton Pass アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg-color:proton-pass" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg-color:proton-pass" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg-color:proton-pass" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--proton-pass]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:proton-pass"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg-color:proton-pass"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/thesvg-color/proton-pass.svg" alt="Proton Pass アイコン" width="24" height="24">theSVG Color の関連アイコン
他のアイコンセットの Proton Pass アイコン
Proton Pass アイコン のよくある質問
Proton Pass アイコンは商用利用でも無料ですか?
はい。theSVG Color icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Proton Pass アイコンを使うには?
@iconify/react をインストールして <Icon icon="thesvg-color:proton-pass" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Proton Pass アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/thesvg-color/proton-pass.svg" alt="Proton Pass アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。