Visual Studio Code icon
logos:visual-studio-code
The Visual Studio Code icon (logos:visual-studio-code) is a free SVG icon from the SVG Logos set by Gil Barbara. It is drawn on a 256 × 254 grid. SVG Logos icons are released under the CC0 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
- SVG Logos
- Author
- Gil Barbara
- License
- CC0-1.0
- Size
- 256 × 254
- Tags
- visualstudio, studiocode, visualstudiocode
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="254" viewBox="0 0 256 254"><defs><linearGradient id="SVG6Q5wMbNQ" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#fff"/><stop offset="100%" stop-color="#fff" stop-opacity="0"/></linearGradient><path id="SVGWhZ12djk" d="M180.828 252.605a15.87 15.87 0 0 0 12.65-.486l52.501-25.262a15.94 15.94 0 0 0 9.025-14.364V41.197a15.94 15.94 0 0 0-9.025-14.363l-52.5-25.263a15.88 15.88 0 0 0-18.115 3.084L74.857 96.35l-43.78-33.232a10.614 10.614 0 0 0-13.56.603L3.476 76.494c-4.63 4.211-4.635 11.495-.012 15.713l37.967 34.638l-37.967 34.637c-4.623 4.219-4.618 11.502.012 15.714l14.041 12.772a10.614 10.614 0 0 0 13.56.604l43.78-33.233l100.507 91.695a15.85 15.85 0 0 0 5.464 3.571m10.464-183.649l-76.262 57.889l76.262 57.888z"/></defs><mask id="SVGSAQ58H2f" fill="#fff"><use href="#SVGWhZ12djk"/></mask><path fill="#0065a9" d="M246.135 26.873L193.593 1.575a15.885 15.885 0 0 0-18.123 3.08L3.466 161.482c-4.626 4.219-4.62 11.502.012 15.714l14.05 12.772a10.625 10.625 0 0 0 13.569.604L238.229 33.436c6.949-5.271 16.93-.315 16.93 8.407v-.61a15.94 15.94 0 0 0-9.024-14.36" mask="url(#SVGSAQ58H2f)"/><path fill="#007acc" d="m246.135 226.816l-52.542 25.298a15.89 15.89 0 0 1-18.123-3.08L3.466 92.207c-4.626-4.218-4.62-11.502.012-15.713l14.05-12.773a10.625 10.625 0 0 1 13.569-.603l207.132 157.135c6.949 5.271 16.93.315 16.93-8.408v.611a15.94 15.94 0 0 1-9.024 14.36" mask="url(#SVGSAQ58H2f)"/><path fill="#1f9cf0" d="M193.428 252.134a15.89 15.89 0 0 1-18.125-3.083c5.881 5.88 15.938 1.715 15.938-6.603V11.273c0-8.318-10.057-12.483-15.938-6.602a15.89 15.89 0 0 1 18.125-3.084l52.533 25.263a15.94 15.94 0 0 1 9.03 14.363V212.51c0 6.125-3.51 11.709-9.03 14.363z" mask="url(#SVGSAQ58H2f)"/><path fill="url(#SVG6Q5wMbNQ)" fill-opacity=".25" d="M180.828 252.605a15.87 15.87 0 0 0 12.65-.486l52.5-25.263a15.94 15.94 0 0 0 9.026-14.363V41.197a15.94 15.94 0 0 0-9.025-14.363L193.477 1.57a15.88 15.88 0 0 0-18.114 3.084L74.857 96.35l-43.78-33.232a10.614 10.614 0 0 0-13.56.603L3.476 76.494c-4.63 4.211-4.635 11.495-.012 15.713l37.967 34.638l-37.967 34.637c-4.623 4.219-4.618 11.502.012 15.714l14.041 12.772a10.614 10.614 0 0 0 13.56.604l43.78-33.233l100.506 91.695a15.9 15.9 0 0 0 5.465 3.571m10.464-183.65l-76.262 57.89l76.262 57.888z" mask="url(#SVGSAQ58H2f)"/></svg>How to use the Visual Studio Code icon
React
import { Icon } from "@iconify/react";
<Icon icon="logos:visual-studio-code" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="logos:visual-studio-code" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="logos:visual-studio-code" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[logos--visual-studio-code]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/logos -->
<div class="i-logos:visual-studio-code"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="logos:visual-studio-code"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/logos/visual-studio-code.svg" alt="Visual Studio Code icon" width="24" height="24">Related icons in SVG Logos
Visual Studio Code icon in other icon sets
Visual Studio Code icon FAQ
Is the Visual Studio Code icon free for commercial use?
Yes. SVG Logos icons are released under the CC0 license, which allows use in personal and commercial projects.
How do I use the Visual Studio Code icon in React?
Install @iconify/react and render <Icon icon="logos:visual-studio-code" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Visual Studio Code icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/logos/visual-studio-code.svg" alt="Visual Studio Code icon">, or paste the SVG code inline to style it with CSS.