youtube icon
youtube from Huge Icons by Hugeicons · Stroke · MIT Free for personal and commercial use.
- Name
- youtube
- Set
- Huge Icons
- Style
- Stroke
- Viewbox
- 24×24
- License
- MIT
The same icon in other sets
youtube-fillAkar Iconsyoutube-filledAnt Design IconsyoutubeBootstrap IconsyoutubeBoxicons BrandsyoutubeCoreUI BrandsyoutubeFont Awesome 6 BrandsyoutubeFont Awesome BrandsyoutubeFeather Iconsyoutube-solidFlowbite Iconsyoutubecss.ggyoutubeIconParkyoutubeIconPark OutlineyoutubeIconPark SolidyoutubeIconPark TwoToneyoutubeIconoiryoutubeJam IconsyoutubeLine AwesomeyoutubeMaterial Line IconsyoutubeSVG LogosyoutubeLucideyoutubeMage IconsyoutubeMaterial Design Iconsyoutube-fillMingCute IconyoutubeMyna UI Icons
Use the youtube icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 20.5c1.81 0 3.545-.179 5.153-.507c2.01-.41 3.014-.614 3.93-1.792c.917-1.179.917-2.532.917-5.238v-1.926c0-2.706 0-4.06-.917-5.238c-.916-1.178-1.92-1.383-3.93-1.792A26 26 0 0 0 12 3.5c-1.81 0-3.545.179-5.153.507c-2.01.41-3.014.614-3.93 1.792C2 6.978 2 8.331 2 11.037v1.926c0 2.706 0 4.06.917 5.238c.916 1.178 1.92 1.383 3.93 1.792c1.608.328 3.343.507 5.153.507Z"/><path stroke-linejoin="round" d="M15.962 12.313c-.148.606-.938 1.04-2.517 1.911c-1.718.947-2.577 1.42-3.272 1.237a1.7 1.7 0 0 1-.635-.317C9 14.709 9 13.806 9 12s0-2.709.538-3.144c.182-.147.4-.256.635-.317c.695-.183 1.554.29 3.272 1.237c1.58.87 2.369 1.305 2.517 1.911c.05.206.05.42 0 .626Z"/></g></svg>
React
import type { SVGProps } from "react";
export function HugeiconsYoutube(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M12 20.5c1.81 0 3.545-.179 5.153-.507c2.01-.41 3.014-.614 3.93-1.792c.917-1.179.917-2.532.917-5.238v-1.926c0-2.706 0-4.06-.917-5.238c-.916-1.178-1.92-1.383-3.93-1.792A26 26 0 0 0 12 3.5c-1.81 0-3.545.179-5.153.507c-2.01.41-3.014.614-3.93 1.792C2 6.978 2 8.331 2 11.037v1.926c0 2.706 0 4.06.917 5.238c.916 1.178 1.92 1.383 3.93 1.792c1.608.328 3.343.507 5.153.507Z"/><path strokeLinejoin="round" d="M15.962 12.313c-.148.606-.938 1.04-2.517 1.911c-1.718.947-2.577 1.42-3.272 1.237a1.7 1.7 0 0 1-.635-.317C9 14.709 9 13.806 9 12s0-2.709.538-3.144c.182-.147.4-.256.635-.317c.695-.183 1.554.29 3.272 1.237c1.58.87 2.369 1.305 2.517 1.911c.05.206.05.42 0 .626Z"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 20.5c1.81 0 3.545-.179 5.153-.507c2.01-.41 3.014-.614 3.93-1.792c.917-1.179.917-2.532.917-5.238v-1.926c0-2.706 0-4.06-.917-5.238c-.916-1.178-1.92-1.383-3.93-1.792A26 26 0 0 0 12 3.5c-1.81 0-3.545.179-5.153.507c-2.01.41-3.014.614-3.93 1.792C2 6.978 2 8.331 2 11.037v1.926c0 2.706 0 4.06.917 5.238c.916 1.178 1.92 1.383 3.93 1.792c1.608.328 3.343.507 5.153.507Z"/><path stroke-linejoin="round" d="M15.962 12.313c-.148.606-.938 1.04-2.517 1.911c-1.718.947-2.577 1.42-3.272 1.237a1.7 1.7 0 0 1-.635-.317C9 14.709 9 13.806 9 12s0-2.709.538-3.144c.182-.147.4-.256.635-.317c.695-.183 1.554.29 3.272 1.237c1.58.87 2.369 1.305 2.517 1.911c.05.206.05.42 0 .626Z"/></g></svg> </template>
CSS
.icon-youtube {
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%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M12%2020.5c1.81%200%203.545-.179%205.153-.507c2.01-.41%203.014-.614%203.93-1.792c.917-1.179.917-2.532.917-5.238v-1.926c0-2.706%200-4.06-.917-5.238c-.916-1.178-1.92-1.383-3.93-1.792A26%2026%200%200%200%2012%203.5c-1.81%200-3.545.179-5.153.507c-2.01.41-3.014.614-3.93%201.792C2%206.978%202%208.331%202%2011.037v1.926c0%202.706%200%204.06.917%205.238c.916%201.178%201.92%201.383%203.93%201.792c1.608.328%203.343.507%205.153.507Z%22%2F%3E%3Cpath%20stroke-linejoin%3D%22round%22%20d%3D%22M15.962%2012.313c-.148.606-.938%201.04-2.517%201.911c-1.718.947-2.577%201.42-3.272%201.237a1.7%201.7%200%200%201-.635-.317C9%2014.709%209%2013.806%209%2012s0-2.709.538-3.144c.182-.147.4-.256.635-.317c.695-.183%201.554.29%203.272%201.237c1.58.87%202.369%201.305%202.517%201.911c.05.206.05.42%200%20.626Z%22%2F%3E%3C%2Fg%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%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M12%2020.5c1.81%200%203.545-.179%205.153-.507c2.01-.41%203.014-.614%203.93-1.792c.917-1.179.917-2.532.917-5.238v-1.926c0-2.706%200-4.06-.917-5.238c-.916-1.178-1.92-1.383-3.93-1.792A26%2026%200%200%200%2012%203.5c-1.81%200-3.545.179-5.153.507c-2.01.41-3.014.614-3.93%201.792C2%206.978%202%208.331%202%2011.037v1.926c0%202.706%200%204.06.917%205.238c.916%201.178%201.92%201.383%203.93%201.792c1.608.328%203.343.507%205.153.507Z%22%2F%3E%3Cpath%20stroke-linejoin%3D%22round%22%20d%3D%22M15.962%2012.313c-.148.606-.938%201.04-2.517%201.911c-1.718.947-2.577%201.42-3.272%201.237a1.7%201.7%200%200%201-.635-.317C9%2014.709%209%2013.806%209%2012s0-2.709.538-3.144c.182-.147.4-.256.635-.317c.695-.183%201.554.29%203.272%201.237c1.58.87%202.369%201.305%202.517%201.911c.05.206.05.42%200%20.626Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/hugeicons/youtube.svg?color=%231a73e8&size=48
