visual studio code icon
visual-studio-code from Huge Icons by Hugeicons · Stroke · MIT Free for personal and commercial use.
- Name
- visual-studio-code
- Set
- Huge Icons
- Style
- Stroke
- Viewbox
- 24×24
- License
- MIT
The same icon in other sets
Use the visual studio code icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.016 16.5v4.782c0 .32-.21.592-.499.684m.499-5.466L10.877 12m6.139 4.5v-9m-9.27 2.205L4.252 7.03a.995.995 0 0 0-1.31.088l-.649.652c-.398.4-.388 1.05.023 1.436L5.283 12m2.464-2.295L10.877 12m-3.13-2.295l8.066-7.513a.72.72 0 0 1 .704-.158M10.877 12l6.139-4.5m0 0V2.718c0-.32-.21-.592-.499-.684m-8.77 12.26L4.25 16.97a.995.995 0 0 1-1.31-.088l-.649-.652c-.398-.4-.388-1.05.023-1.436L5.283 12m2.464 2.295l8.066 7.513a.71.71 0 0 0 .704.158m-8.77-7.671L5.283 12m11.234-9.966l4.894 2.201a1 1 0 0 1 .59.913v13.705a1 1 0 0 1-.59.912l-4.894 2.201"/></svg>
React
import type { SVGProps } from "react";
export function HugeiconsVisualStudioCode(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M17.016 16.5v4.782c0 .32-.21.592-.499.684m.499-5.466L10.877 12m6.139 4.5v-9m-9.27 2.205L4.252 7.03a.995.995 0 0 0-1.31.088l-.649.652c-.398.4-.388 1.05.023 1.436L5.283 12m2.464-2.295L10.877 12m-3.13-2.295l8.066-7.513a.72.72 0 0 1 .704-.158M10.877 12l6.139-4.5m0 0V2.718c0-.32-.21-.592-.499-.684m-8.77 12.26L4.25 16.97a.995.995 0 0 1-1.31-.088l-.649-.652c-.398-.4-.388-1.05.023-1.436L5.283 12m2.464 2.295l8.066 7.513a.71.71 0 0 0 .704.158m-8.77-7.671L5.283 12m11.234-9.966l4.894 2.201a1 1 0 0 1 .59.913v13.705a1 1 0 0 1-.59.912l-4.894 2.201"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.016 16.5v4.782c0 .32-.21.592-.499.684m.499-5.466L10.877 12m6.139 4.5v-9m-9.27 2.205L4.252 7.03a.995.995 0 0 0-1.31.088l-.649.652c-.398.4-.388 1.05.023 1.436L5.283 12m2.464-2.295L10.877 12m-3.13-2.295l8.066-7.513a.72.72 0 0 1 .704-.158M10.877 12l6.139-4.5m0 0V2.718c0-.32-.21-.592-.499-.684m-8.77 12.26L4.25 16.97a.995.995 0 0 1-1.31-.088l-.649-.652c-.398-.4-.388-1.05.023-1.436L5.283 12m2.464 2.295l8.066 7.513a.71.71 0 0 0 .704.158m-8.77-7.671L5.283 12m11.234-9.966l4.894 2.201a1 1 0 0 1 .59.913v13.705a1 1 0 0 1-.59.912l-4.894 2.201"/></svg> </template>
CSS
.icon-visual-studio-code {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M17.016%2016.5v4.782c0%20.32-.21.592-.499.684m.499-5.466L10.877%2012m6.139%204.5v-9m-9.27%202.205L4.252%207.03a.995.995%200%200%200-1.31.088l-.649.652c-.398.4-.388%201.05.023%201.436L5.283%2012m2.464-2.295L10.877%2012m-3.13-2.295l8.066-7.513a.72.72%200%200%201%20.704-.158M10.877%2012l6.139-4.5m0%200V2.718c0-.32-.21-.592-.499-.684m-8.77%2012.26L4.25%2016.97a.995.995%200%200%201-1.31-.088l-.649-.652c-.398-.4-.388-1.05.023-1.436L5.283%2012m2.464%202.295l8.066%207.513a.71.71%200%200%200%20.704.158m-8.77-7.671L5.283%2012m11.234-9.966l4.894%202.201a1%201%200%200%201%20.59.913v13.705a1%201%200%200%201-.59.912l-4.894%202.201%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M17.016%2016.5v4.782c0%20.32-.21.592-.499.684m.499-5.466L10.877%2012m6.139%204.5v-9m-9.27%202.205L4.252%207.03a.995.995%200%200%200-1.31.088l-.649.652c-.398.4-.388%201.05.023%201.436L5.283%2012m2.464-2.295L10.877%2012m-3.13-2.295l8.066-7.513a.72.72%200%200%201%20.704-.158M10.877%2012l6.139-4.5m0%200V2.718c0-.32-.21-.592-.499-.684m-8.77%2012.26L4.25%2016.97a.995.995%200%200%201-1.31-.088l-.649-.652c-.398-.4-.388-1.05.023-1.436L5.283%2012m2.464%202.295l8.066%207.513a.71.71%200%200%200%20.704.158m-8.77-7.671L5.283%2012m11.234-9.966l4.894%202.201a1%201%200%200%201%20.59.913v13.705a1%201%200%200%201-.59.912l-4.894%202.201%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/hugeicons/visual-studio-code.svg?color=%231a73e8&size=48
