youtube logo icon
youtube-logo-light from Phosphor by Phosphor Icons · Light · MIT Free for personal and commercial use.
- Name
- youtube-logo-light
- Set
- Phosphor
- Style
- Light
- 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="m163.33 123l-48-32a6 6 0 0 0-9.33 5v64a6 6 0 0 0 9.33 5l48-32a6 6 0 0 0 0-10M118 148.79v-41.58L149.18 128ZM232.4 70a22 22 0 0 0-13.28-15C185 41.79 130.27 42 128 42s-57-.21-91.16 13A22 22 0 0 0 23.6 70c-2.55 9.89-5.6 28-5.6 58s3.05 48.11 5.6 58a22 22 0 0 0 13.28 15C71 214.21 125.72 214 128 214h.71c6.91 0 58-.44 90.45-13a22 22 0 0 0 13.28-15c2.55-9.87 5.6-27.93 5.6-58S235 79.89 232.4 70m-11.62 113a10 10 0 0 1-6 6.86c-32 12.33-86.2 12.14-86.78 12.14s-54.71.2-86.75-12.17a10 10 0 0 1-6-6.86C32.84 173.78 30 156.78 30 128s2.84-45.78 5.22-55a10 10 0 0 1 6-6.86C72.06 54.26 123.53 54 127.76 54h.24c.54 0 54.71-.2 86.75 12.17a10 10 0 0 1 6 6.86c2.38 9.19 5.22 26.19 5.22 55s-2.81 45.75-5.19 54.97"/></svg>
React
import type { SVGProps } from "react";
export function PhYoutubeLogoLight(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="m163.33 123l-48-32a6 6 0 0 0-9.33 5v64a6 6 0 0 0 9.33 5l48-32a6 6 0 0 0 0-10M118 148.79v-41.58L149.18 128ZM232.4 70a22 22 0 0 0-13.28-15C185 41.79 130.27 42 128 42s-57-.21-91.16 13A22 22 0 0 0 23.6 70c-2.55 9.89-5.6 28-5.6 58s3.05 48.11 5.6 58a22 22 0 0 0 13.28 15C71 214.21 125.72 214 128 214h.71c6.91 0 58-.44 90.45-13a22 22 0 0 0 13.28-15c2.55-9.87 5.6-27.93 5.6-58S235 79.89 232.4 70m-11.62 113a10 10 0 0 1-6 6.86c-32 12.33-86.2 12.14-86.78 12.14s-54.71.2-86.75-12.17a10 10 0 0 1-6-6.86C32.84 173.78 30 156.78 30 128s2.84-45.78 5.22-55a10 10 0 0 1 6-6.86C72.06 54.26 123.53 54 127.76 54h.24c.54 0 54.71-.2 86.75 12.17a10 10 0 0 1 6 6.86c2.38 9.19 5.22 26.19 5.22 55s-2.81 45.75-5.19 54.97"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="m163.33 123l-48-32a6 6 0 0 0-9.33 5v64a6 6 0 0 0 9.33 5l48-32a6 6 0 0 0 0-10M118 148.79v-41.58L149.18 128ZM232.4 70a22 22 0 0 0-13.28-15C185 41.79 130.27 42 128 42s-57-.21-91.16 13A22 22 0 0 0 23.6 70c-2.55 9.89-5.6 28-5.6 58s3.05 48.11 5.6 58a22 22 0 0 0 13.28 15C71 214.21 125.72 214 128 214h.71c6.91 0 58-.44 90.45-13a22 22 0 0 0 13.28-15c2.55-9.87 5.6-27.93 5.6-58S235 79.89 232.4 70m-11.62 113a10 10 0 0 1-6 6.86c-32 12.33-86.2 12.14-86.78 12.14s-54.71.2-86.75-12.17a10 10 0 0 1-6-6.86C32.84 173.78 30 156.78 30 128s2.84-45.78 5.22-55a10 10 0 0 1 6-6.86C72.06 54.26 123.53 54 127.76 54h.24c.54 0 54.71-.2 86.75 12.17a10 10 0 0 1 6 6.86c2.38 9.19 5.22 26.19 5.22 55s-2.81 45.75-5.19 54.97"/></svg> </template>
CSS
.icon-youtube-logo-light {
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%22m163.33%20123l-48-32a6%206%200%200%200-9.33%205v64a6%206%200%200%200%209.33%205l48-32a6%206%200%200%200%200-10M118%20148.79v-41.58L149.18%20128ZM232.4%2070a22%2022%200%200%200-13.28-15C185%2041.79%20130.27%2042%20128%2042s-57-.21-91.16%2013A22%2022%200%200%200%2023.6%2070c-2.55%209.89-5.6%2028-5.6%2058s3.05%2048.11%205.6%2058a22%2022%200%200%200%2013.28%2015C71%20214.21%20125.72%20214%20128%20214h.71c6.91%200%2058-.44%2090.45-13a22%2022%200%200%200%2013.28-15c2.55-9.87%205.6-27.93%205.6-58S235%2079.89%20232.4%2070m-11.62%20113a10%2010%200%200%201-6%206.86c-32%2012.33-86.2%2012.14-86.78%2012.14s-54.71.2-86.75-12.17a10%2010%200%200%201-6-6.86C32.84%20173.78%2030%20156.78%2030%20128s2.84-45.78%205.22-55a10%2010%200%200%201%206-6.86C72.06%2054.26%20123.53%2054%20127.76%2054h.24c.54%200%2054.71-.2%2086.75%2012.17a10%2010%200%200%201%206%206.86c2.38%209.19%205.22%2026.19%205.22%2055s-2.81%2045.75-5.19%2054.97%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%22m163.33%20123l-48-32a6%206%200%200%200-9.33%205v64a6%206%200%200%200%209.33%205l48-32a6%206%200%200%200%200-10M118%20148.79v-41.58L149.18%20128ZM232.4%2070a22%2022%200%200%200-13.28-15C185%2041.79%20130.27%2042%20128%2042s-57-.21-91.16%2013A22%2022%200%200%200%2023.6%2070c-2.55%209.89-5.6%2028-5.6%2058s3.05%2048.11%205.6%2058a22%2022%200%200%200%2013.28%2015C71%20214.21%20125.72%20214%20128%20214h.71c6.91%200%2058-.44%2090.45-13a22%2022%200%200%200%2013.28-15c2.55-9.87%205.6-27.93%205.6-58S235%2079.89%20232.4%2070m-11.62%20113a10%2010%200%200%201-6%206.86c-32%2012.33-86.2%2012.14-86.78%2012.14s-54.71.2-86.75-12.17a10%2010%200%200%201-6-6.86C32.84%20173.78%2030%20156.78%2030%20128s2.84-45.78%205.22-55a10%2010%200%200%201%206-6.86C72.06%2054.26%20123.53%2054%20127.76%2054h.24c.54%200%2054.71-.2%2086.75%2012.17a10%2010%200%200%201%206%206.86c2.38%209.19%205.22%2026.19%205.22%2055s-2.81%2045.75-5.19%2054.97%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/youtube-logo-light.svg?color=%231a73e8&size=48
