Visual Studio icon
thesvg-color:visual-studio
The Visual Studio icon (thesvg-color:visual-studio) is a free SVG icon from the theSVG Color set by thesvg.org. It is drawn on a 193 × 193 grid. theSVG Color icons are released under the MIT license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.
- Icon set
- theSVG Color
- Author
- thesvg.org
- License
- MIT
- Size
- 193 × 193
- Tags
- visualstudio
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="193" height="193" viewBox="0 0 193 193"><g fill="none"><defs><path id="SVGyrCNaeNv" fill="#fff" d="M8.271 8.271h176.457v176.457H8.271z"/></defs><g clip-path="url(#SVGV0fJtqVN)"><g clip-path="url(#SVGV0fJtqVN)"><mask id="SVGjhEKDdph" width="177" height="177" x="8" y="8" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#fff" d="m40.621 157.524l-29.408-22.057a7.28 7.28 0 0 1-2.941-5.881V63.414a7.29 7.29 0 0 1 2.941-5.88l29.408-22.058a6.66 6.66 0 0 0-2.02 5.881v110.286a6.66 6.66 0 0 0 2.02 5.881"/><path fill="#fff" d="M181.456 38.895a7.4 7.4 0 0 0-4.081-1.213a7.14 7.14 0 0 0-5.073 2.057l-.513.515L113.117 96.5l-32.462 31.137l-30.034 28.784l-.515.516a7.14 7.14 0 0 1-5.073 2.059a7.4 7.4 0 0 1-4.412-1.472l-29.408-22.057a7.346 7.346 0 0 0 9.998-1.103l32.644-37.9l26.8-31.1l46.946-54.52a7.24 7.24 0 0 1 5.55-2.572a7.4 7.4 0 0 1 4.08 1.213z"/><path fill="#fff" d="m181.456 154.105l-44.114 29.41a7.45 7.45 0 0 1-9.667-1.323l-47.02-54.555l-26.8-31.173l-32.644-37.867a7.386 7.386 0 0 0-9.998-1.064l29.408-22.057a7.4 7.4 0 0 1 4.411-1.472a7.13 7.13 0 0 1 5.074 2.06l.515.515l30.034 28.785L113.117 96.5l58.672 56.246l.513.515a7.14 7.14 0 0 0 5.073 2.057a7.4 7.4 0 0 0 4.081-1.213"/><path fill="#fff" d="M184.729 45.032v102.936a7.38 7.38 0 0 1-3.273 6.137l-44.114 29.41a7.38 7.38 0 0 0 3.272-6.14V15.625a7.44 7.44 0 0 0-3.383-6.14l44.225 29.41a7.42 7.42 0 0 1 3.273 6.137"/></mask><g mask="url(#SVGjhEKDdph)"><path fill="#5e438f" d="m40.621 157.524l-29.408-22.057a7.3 7.3 0 0 1-2.941-5.881V63.414a7.29 7.29 0 0 1 2.941-5.88l29.408-22.058a6.66 6.66 0 0 0-2.02 5.881v110.286a6.66 6.66 0 0 0 2.02 5.881"/><g filter="url(#SVGgB6zmjbz)"><path fill="url(#SVGK24CZbVA)" d="M181.455 38.895a7.4 7.4 0 0 0-4.08-1.213a7.15 7.15 0 0 0-5.073 2.057l-.513.515l-31.25 29.962L113.117 96.5l-32.463 31.137l-30.033 28.784l-.516.516a7.14 7.14 0 0 1-5.073 2.059a7.4 7.4 0 0 1-4.411-1.472l-29.408-22.057a7.346 7.346 0 0 0 9.997-1.103l16.471-19.115l16.174-18.785l26.8-31.1l46.945-54.52a7.25 7.25 0 0 1 5.55-2.572a7.4 7.4 0 0 1 4.081 1.213z"/></g><g filter="url(#SVGVKIJ8bpe)"><path fill="url(#SVG0rLMgcID)" d="m181.455 154.105l-44.114 29.411a7.44 7.44 0 0 1-9.666-1.324l-47.02-54.555l-26.8-31.173l-16.173-18.748L21.21 58.598a7.387 7.387 0 0 0-9.997-1.065L40.62 35.477a7.4 7.4 0 0 1 4.411-1.472a7.13 7.13 0 0 1 5.073 2.06l.516.515l30.033 28.785L113.117 96.5l27.461 26.323l31.211 29.923l.513.516a7.16 7.16 0 0 0 5.073 2.056a7.4 7.4 0 0 0 4.08-1.213"/></g><g filter="url(#SVGTTTYvd0K)"><path fill="url(#SVGgCsnFcgs)" d="M184.729 45.032v102.935a7.38 7.38 0 0 1-3.273 6.138l-44.115 29.41a7.38 7.38 0 0 0 3.273-6.14V15.625a7.44 7.44 0 0 0-3.383-6.14l44.225 29.41a7.43 7.43 0 0 1 3.273 6.137"/></g></g></g></g><defs><linearGradient id="SVGK24CZbVA" x1="151.642" x2="20.614" y1="8.271" y2="140.148" gradientUnits="userSpaceOnUse"><stop stop-color="#7252aa"/><stop offset="1" stop-color="#7252aa"/></linearGradient><linearGradient id="SVG0rLMgcID" x1="24.814" x2="147.966" y1="40.437" y2="178.293" gradientUnits="userSpaceOnUse"><stop stop-color="#ae7fe2"/><stop offset="1" stop-color="#9a70d4"/></linearGradient><linearGradient id="SVGgCsnFcgs" x1="160.457" x2="160.457" y1="5.936" y2="183.367" gradientUnits="userSpaceOnUse"><stop stop-color="#d59dff"/><stop offset="1" stop-color="#c18ef1"/></linearGradient><filter id="SVGgB6zmjbz" width="180.604" height="161.087" x="6.032" y="4.386" 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"/><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" result="effect2_dropShadow"/><feBlend in="SourceGraphic" in2="effect2_dropShadow" result="shape"/></filter><filter id="SVGVKIJ8bpe" width="180.604" height="161.085" x="6.032" y="30.118" 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"/><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" result="effect2_dropShadow"/><feBlend in="SourceGraphic" in2="effect2_dropShadow" result="shape"/></filter><filter id="SVGTTTYvd0K" width="78.583" height="205.117" x="121.688" y="-6.059" 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"/><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" result="effect2_dropShadow"/><feBlend in="SourceGraphic" in2="effect2_dropShadow" result="shape"/></filter><clipPath id="SVGV0fJtqVN"><use href="#SVGyrCNaeNv"/></clipPath></defs></g></svg>How to use the Visual Studio icon
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg-color:visual-studio" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg-color:visual-studio" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg-color:visual-studio" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--visual-studio]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:visual-studio"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg-color:visual-studio"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/thesvg-color/visual-studio.svg" alt="Visual Studio icon" width="24" height="24">Related icons in theSVG Color
Visual Studio icon in other icon sets
Visual Studio icon FAQ
Is the Visual Studio icon free for commercial use?
Yes. theSVG Color icons are released under the MIT license, which allows use in personal and commercial projects.
How do I use the Visual Studio icon in React?
Install @iconify/react and render <Icon icon="thesvg-color:visual-studio" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Visual Studio icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/thesvg-color/visual-studio.svg" alt="Visual Studio icon">, or paste the SVG code inline to style it with CSS.