Visualstudio Light アイコン

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

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

skill-icons:visualstudio-light

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

アイコンセット: Skill Icons
作者: tandpfun
ライセンス: MIT
サイズ: 256 × 256
タグ: visualstudiolight

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><mask id="SVG7yCybbpX" width="200" height="200" x="28" y="28" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#fff" d="m64.666 197.166l-33.332-25A8.25 8.25 0 0 1 28 165.5v-75a8.26 8.26 0 0 1 3.334-6.665l33.332-25a7.55 7.55 0 0 0-2.291 6.665v125a7.55 7.55 0 0 0 2.29 6.666"/><path fill="#fff" d="M224.29 62.71a8.4 8.4 0 0 0-4.625-1.376a8.1 8.1 0 0 0-5.75 2.332l-.581.584l-66.5 63.75l-36.794 35.291L76 195.915l-.584.585a8.1 8.1 0 0 1-5.75 2.334a8.37 8.37 0 0 1-5-1.669l-33.332-24.999a8.323 8.323 0 0 0 11.331-1.251l37-42.956l30.375-35.25l53.21-61.793A8.2 8.2 0 0 1 169.541 28a8.37 8.37 0 0 1 4.624 1.375z"/><path fill="#fff" d="m224.29 193.29l-49.999 33.334a8.44 8.44 0 0 1-5.759 1.296a8.45 8.45 0 0 1-5.198-2.795l-53.294-61.834l-30.374-35.332l-37-42.919a8.37 8.37 0 0 0-11.332-1.206l33.332-25a8.38 8.38 0 0 1 5-1.668a8.08 8.08 0 0 1 5.75 2.334l.584.584l34.04 32.625L146.834 128l66.5 63.75l.581.584a8.1 8.1 0 0 0 5.75 2.331a8.36 8.36 0 0 0 4.625-1.375"/><path fill="#fff" d="M228 69.666v116.668a8.36 8.36 0 0 1-3.71 6.956l-49.999 33.334a8.4 8.4 0 0 0 2.726-3.015a8.4 8.4 0 0 0 .982-3.944V36.335a8.43 8.43 0 0 0-3.834-6.96l50.125 33.334a8.4 8.4 0 0 1 3.71 6.956"/></mask><g fill="none"><rect width="256" height="256" fill="#f4f2ed" rx="60"/><g mask="url(#SVG7yCybbpX)"><path fill="#5e438f" d="m64.666 197.165l-33.332-24.999A8.27 8.27 0 0 1 28 165.5v-75a8.26 8.26 0 0 1 3.334-6.666l33.332-25a7.55 7.55 0 0 0-2.291 6.666v125a7.55 7.55 0 0 0 2.29 6.665"/><g filter="url(#SVGn6hR3cid)"><path fill="url(#SVGD26vYc0o)" d="M224.289 62.71a8.37 8.37 0 0 0-4.624-1.376a8.1 8.1 0 0 0-5.75 2.332l-.581.584l-35.42 33.96l-31.08 29.79l-36.794 35.291L76 195.915l-.585.585a8.1 8.1 0 0 1-5.75 2.334a8.37 8.37 0 0 1-5-1.669l-33.331-24.999a8.323 8.323 0 0 0 11.331-1.251l18.669-21.665l18.331-21.291l30.375-35.25l53.209-61.793a8.22 8.22 0 0 1 6.29-2.916a8.4 8.4 0 0 1 4.626 1.375z"/></g><g filter="url(#SVGbth4KehM)"><path fill="url(#SVG9uVsZdOT)" d="m224.289 193.29l-49.999 33.335a8.44 8.44 0 0 1-10.956-1.5l-53.294-61.834l-30.375-35.332l-18.331-21.25l-18.669-21.668a8.37 8.37 0 0 0-11.331-1.207l33.331-25a8.37 8.37 0 0 1 5-1.668a8.08 8.08 0 0 1 5.75 2.334l.584.584L110.04 92.71L146.834 128l31.124 29.835l35.376 33.915l.581.585a8.1 8.1 0 0 0 5.75 2.33a8.36 8.36 0 0 0 4.624-1.375"/></g><g filter="url(#SVG64RUMZan)"><path fill="url(#SVGu7VMCbCy)" d="M228 69.665v116.668a8.37 8.37 0 0 1-3.71 6.957l-50 33.334a8.35 8.35 0 0 0 2.725-3.015a8.36 8.36 0 0 0 .984-3.944V36.335a8.43 8.43 0 0 0-3.834-6.96l50.125 33.334a8.4 8.4 0 0 1 2.721 3.017a8.4 8.4 0 0 1 .989 3.94"/></g></g><defs><linearGradient id="SVGD26vYc0o" x1="190.499" x2="41.989" y1="28" y2="177.471" gradientUnits="userSpaceOnUse"><stop stop-color="#7252aa"/><stop offset="1" stop-color="#7252aa"/></linearGradient><linearGradient id="SVG9uVsZdOT" x1="46.75" x2="186.332" y1="64.457" y2="220.705" gradientUnits="userSpaceOnUse"><stop stop-color="#ae7fe2"/><stop offset="1" stop-color="#9a70d4"/></linearGradient><linearGradient id="SVGu7VMCbCy" x1="200.49" x2="200.49" y1="25.353" y2="226.456" gradientUnits="userSpaceOnUse"><stop stop-color="#d59dff"/><stop offset="1" stop-color="#c18ef1"/></linearGradient><filter id="SVGn6hR3cid" width="203.317" height="181.196" x="26.153" y="24.114" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".246"/><feGaussianBlur stdDeviation=".246"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_217_245"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="1.295"/><feGaussianBlur stdDeviation="2.59"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0"/><feBlend in2="effect1_dropShadow_217_245" result="effect2_dropShadow_217_245"/><feBlend in="SourceGraphic" in2="effect2_dropShadow_217_245" result="shape"/></filter><filter id="SVGbth4KehM" width="203.317" height="181.194" x="26.153" y="53.28" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".246"/><feGaussianBlur stdDeviation=".246"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_217_245"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="1.295"/><feGaussianBlur stdDeviation="2.59"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0"/><feBlend in2="effect1_dropShadow_217_245" result="effect2_dropShadow_217_245"/><feBlend in="SourceGraphic" in2="effect2_dropShadow_217_245" result="shape"/></filter><filter id="SVG64RUMZan" width="84.921" height="228.335" x="158.622" y="13.832" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation=".13"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_217_245"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation="7.771"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/><feBlend in2="effect1_dropShadow_217_245" result="effect2_dropShadow_217_245"/><feBlend in="SourceGraphic" in2="effect2_dropShadow_217_245" result="shape"/></filter></defs></g></svg>

Visualstudio Light アイコンの使い方

React

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

<Icon icon="skill-icons:visualstudio-light" width="24" />

Vue

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

<template>
  <Icon icon="skill-icons:visualstudio-light" width="24" />
</template>

Svelte

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

<Icon icon="skill-icons:visualstudio-light" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[skill-icons--visualstudio-light]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/skill-icons -->
<div class="i-skill-icons:visualstudio-light"></div>

Web コンポーネント

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

<iconify-icon icon="skill-icons:visualstudio-light"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/skill-icons/visualstudio-light.svg" alt="Visualstudio Light アイコン" width="24" height="24">

Skill Icons の関連アイコン

Visualstudio Light アイコンのよくある質問

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

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

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

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

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

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

Skill Icons をすべて見る →