youtube logo icon
youtube-logo-bold from Phosphor by Phosphor Icons · Bold · MIT Free for personal and commercial use.
- Name
- youtube-logo-bold
- Set
- Phosphor
- Style
- Bold
- Viewbox
- 256×256
- License
- MIT
5 other variants in Phosphor
Use the youtube logo icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="m170.49 117.91l-56-36A12 12 0 0 0 96 92v72a12 12 0 0 0 18.49 10.09l56-36a12 12 0 0 0 0-20.18M120 142v-28l21.81 14Zm118.21-73.5a28.05 28.05 0 0 0-16.93-19.14C186.4 35.91 131.29 36 128 36s-58.4-.09-93.28 13.38a28.05 28.05 0 0 0-16.93 19.14C15.15 78.72 12 97.32 12 128s3.15 49.28 5.79 59.48a28.05 28.05 0 0 0 16.93 19.14C68.21 219.55 120.36 220 127.37 220h1.26c7 0 59.16-.45 92.65-13.38a28.05 28.05 0 0 0 16.93-19.14c2.64-10.2 5.79-28.8 5.79-59.48s-3.15-49.28-5.79-59.48ZM215 181.46a4 4 0 0 1-2.34 2.77C182.78 195.76 132.27 196 128.32 196h-.39c-.53 0-53.64.17-84.56-11.77a4 4 0 0 1-2.37-2.77c-1.88-7.24-5-23.82-5-53.46s3.15-46.22 5-53.46a4 4 0 0 1 2.34-2.77C74.29 59.83 127.39 60 127.92 60h.15c.54 0 53.64-.17 84.56 11.77a4 4 0 0 1 2.37 2.77c1.88 7.24 5 23.82 5 53.46s-3.15 46.22-5 53.46"/></svg>
React
import type { SVGProps } from "react";
export function PhYoutubeLogoBold(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="m170.49 117.91l-56-36A12 12 0 0 0 96 92v72a12 12 0 0 0 18.49 10.09l56-36a12 12 0 0 0 0-20.18M120 142v-28l21.81 14Zm118.21-73.5a28.05 28.05 0 0 0-16.93-19.14C186.4 35.91 131.29 36 128 36s-58.4-.09-93.28 13.38a28.05 28.05 0 0 0-16.93 19.14C15.15 78.72 12 97.32 12 128s3.15 49.28 5.79 59.48a28.05 28.05 0 0 0 16.93 19.14C68.21 219.55 120.36 220 127.37 220h1.26c7 0 59.16-.45 92.65-13.38a28.05 28.05 0 0 0 16.93-19.14c2.64-10.2 5.79-28.8 5.79-59.48s-3.15-49.28-5.79-59.48ZM215 181.46a4 4 0 0 1-2.34 2.77C182.78 195.76 132.27 196 128.32 196h-.39c-.53 0-53.64.17-84.56-11.77a4 4 0 0 1-2.37-2.77c-1.88-7.24-5-23.82-5-53.46s3.15-46.22 5-53.46a4 4 0 0 1 2.34-2.77C74.29 59.83 127.39 60 127.92 60h.15c.54 0 53.64-.17 84.56 11.77a4 4 0 0 1 2.37 2.77c1.88 7.24 5 23.82 5 53.46s-3.15 46.22-5 53.46"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="m170.49 117.91l-56-36A12 12 0 0 0 96 92v72a12 12 0 0 0 18.49 10.09l56-36a12 12 0 0 0 0-20.18M120 142v-28l21.81 14Zm118.21-73.5a28.05 28.05 0 0 0-16.93-19.14C186.4 35.91 131.29 36 128 36s-58.4-.09-93.28 13.38a28.05 28.05 0 0 0-16.93 19.14C15.15 78.72 12 97.32 12 128s3.15 49.28 5.79 59.48a28.05 28.05 0 0 0 16.93 19.14C68.21 219.55 120.36 220 127.37 220h1.26c7 0 59.16-.45 92.65-13.38a28.05 28.05 0 0 0 16.93-19.14c2.64-10.2 5.79-28.8 5.79-59.48s-3.15-49.28-5.79-59.48ZM215 181.46a4 4 0 0 1-2.34 2.77C182.78 195.76 132.27 196 128.32 196h-.39c-.53 0-53.64.17-84.56-11.77a4 4 0 0 1-2.37-2.77c-1.88-7.24-5-23.82-5-53.46s3.15-46.22 5-53.46a4 4 0 0 1 2.34-2.77C74.29 59.83 127.39 60 127.92 60h.15c.54 0 53.64-.17 84.56 11.77a4 4 0 0 1 2.37 2.77c1.88 7.24 5 23.82 5 53.46s-3.15 46.22-5 53.46"/></svg> </template>
CSS
.icon-youtube-logo-bold {
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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m170.49%20117.91l-56-36A12%2012%200%200%200%2096%2092v72a12%2012%200%200%200%2018.49%2010.09l56-36a12%2012%200%200%200%200-20.18M120%20142v-28l21.81%2014Zm118.21-73.5a28.05%2028.05%200%200%200-16.93-19.14C186.4%2035.91%20131.29%2036%20128%2036s-58.4-.09-93.28%2013.38a28.05%2028.05%200%200%200-16.93%2019.14C15.15%2078.72%2012%2097.32%2012%20128s3.15%2049.28%205.79%2059.48a28.05%2028.05%200%200%200%2016.93%2019.14C68.21%20219.55%20120.36%20220%20127.37%20220h1.26c7%200%2059.16-.45%2092.65-13.38a28.05%2028.05%200%200%200%2016.93-19.14c2.64-10.2%205.79-28.8%205.79-59.48s-3.15-49.28-5.79-59.48ZM215%20181.46a4%204%200%200%201-2.34%202.77C182.78%20195.76%20132.27%20196%20128.32%20196h-.39c-.53%200-53.64.17-84.56-11.77a4%204%200%200%201-2.37-2.77c-1.88-7.24-5-23.82-5-53.46s3.15-46.22%205-53.46a4%204%200%200%201%202.34-2.77C74.29%2059.83%20127.39%2060%20127.92%2060h.15c.54%200%2053.64-.17%2084.56%2011.77a4%204%200%200%201%202.37%202.77c1.88%207.24%205%2023.82%205%2053.46s-3.15%2046.22-5%2053.46%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m170.49%20117.91l-56-36A12%2012%200%200%200%2096%2092v72a12%2012%200%200%200%2018.49%2010.09l56-36a12%2012%200%200%200%200-20.18M120%20142v-28l21.81%2014Zm118.21-73.5a28.05%2028.05%200%200%200-16.93-19.14C186.4%2035.91%20131.29%2036%20128%2036s-58.4-.09-93.28%2013.38a28.05%2028.05%200%200%200-16.93%2019.14C15.15%2078.72%2012%2097.32%2012%20128s3.15%2049.28%205.79%2059.48a28.05%2028.05%200%200%200%2016.93%2019.14C68.21%20219.55%20120.36%20220%20127.37%20220h1.26c7%200%2059.16-.45%2092.65-13.38a28.05%2028.05%200%200%200%2016.93-19.14c2.64-10.2%205.79-28.8%205.79-59.48s-3.15-49.28-5.79-59.48ZM215%20181.46a4%204%200%200%201-2.34%202.77C182.78%20195.76%20132.27%20196%20128.32%20196h-.39c-.53%200-53.64.17-84.56-11.77a4%204%200%200%201-2.37-2.77c-1.88-7.24-5-23.82-5-53.46s3.15-46.22%205-53.46a4%204%200%200%201%202.34-2.77C74.29%2059.83%20127.39%2060%20127.92%2060h.15c.54%200%2053.64-.17%2084.56%2011.77a4%204%200%200%201%202.37%202.77c1.88%207.24%205%2023.82%205%2053.46s-3.15%2046.22-5%2053.46%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/youtube-logo-bold.svg?color=%231a73e8&size=48
