youtube logo icon
youtube-logo-thin from Phosphor by Phosphor Icons · Thin · MIT Free for personal and commercial use.
- Name
- youtube-logo-thin
- Set
- Phosphor
- Style
- Thin
- 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="m162.22 124.67l-48-32A4 4 0 0 0 108 96v64a4 4 0 0 0 2.11 3.53a4 4 0 0 0 4.11-.2l48-32a4 4 0 0 0 0-6.66M116 152.53v-49.06L152.79 128Zm114.46-82a20 20 0 0 0-12.06-13.68C184.6 43.79 130.27 44 128 44s-56.6-.21-90.4 12.85a20 20 0 0 0-12.06 13.67C23 80.27 20 98.16 20 128s3 47.73 5.54 57.48a20 20 0 0 0 12.06 13.67C71.4 212.21 125.73 212 128 212h.71c6.89 0 57.58-.43 89.72-12.85a20 20 0 0 0 12.06-13.67C233 175.72 236 157.84 236 128s-3-47.73-5.54-57.48Zm-7.74 113a12 12 0 0 1-7.21 8.22C183.14 204.19 128.57 204 128 204s-55.11.19-87.48-12.31a12 12 0 0 1-7.21-8.22C30.87 174.17 28 157 28 128s2.87-46.17 5.28-55.47a12 12 0 0 1 7.21-8.22C72.86 51.81 127.43 52 128 52s55.11-.2 87.48 12.31a12 12 0 0 1 7.21 8.22C225.13 81.83 228 99 228 128s-2.87 46.17-5.28 55.47Z"/></svg>
React
import type { SVGProps } from "react";
export function PhYoutubeLogoThin(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="m162.22 124.67l-48-32A4 4 0 0 0 108 96v64a4 4 0 0 0 2.11 3.53a4 4 0 0 0 4.11-.2l48-32a4 4 0 0 0 0-6.66M116 152.53v-49.06L152.79 128Zm114.46-82a20 20 0 0 0-12.06-13.68C184.6 43.79 130.27 44 128 44s-56.6-.21-90.4 12.85a20 20 0 0 0-12.06 13.67C23 80.27 20 98.16 20 128s3 47.73 5.54 57.48a20 20 0 0 0 12.06 13.67C71.4 212.21 125.73 212 128 212h.71c6.89 0 57.58-.43 89.72-12.85a20 20 0 0 0 12.06-13.67C233 175.72 236 157.84 236 128s-3-47.73-5.54-57.48Zm-7.74 113a12 12 0 0 1-7.21 8.22C183.14 204.19 128.57 204 128 204s-55.11.19-87.48-12.31a12 12 0 0 1-7.21-8.22C30.87 174.17 28 157 28 128s2.87-46.17 5.28-55.47a12 12 0 0 1 7.21-8.22C72.86 51.81 127.43 52 128 52s55.11-.2 87.48 12.31a12 12 0 0 1 7.21 8.22C225.13 81.83 228 99 228 128s-2.87 46.17-5.28 55.47Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="m162.22 124.67l-48-32A4 4 0 0 0 108 96v64a4 4 0 0 0 2.11 3.53a4 4 0 0 0 4.11-.2l48-32a4 4 0 0 0 0-6.66M116 152.53v-49.06L152.79 128Zm114.46-82a20 20 0 0 0-12.06-13.68C184.6 43.79 130.27 44 128 44s-56.6-.21-90.4 12.85a20 20 0 0 0-12.06 13.67C23 80.27 20 98.16 20 128s3 47.73 5.54 57.48a20 20 0 0 0 12.06 13.67C71.4 212.21 125.73 212 128 212h.71c6.89 0 57.58-.43 89.72-12.85a20 20 0 0 0 12.06-13.67C233 175.72 236 157.84 236 128s-3-47.73-5.54-57.48Zm-7.74 113a12 12 0 0 1-7.21 8.22C183.14 204.19 128.57 204 128 204s-55.11.19-87.48-12.31a12 12 0 0 1-7.21-8.22C30.87 174.17 28 157 28 128s2.87-46.17 5.28-55.47a12 12 0 0 1 7.21-8.22C72.86 51.81 127.43 52 128 52s55.11-.2 87.48 12.31a12 12 0 0 1 7.21 8.22C225.13 81.83 228 99 228 128s-2.87 46.17-5.28 55.47Z"/></svg> </template>
CSS
.icon-youtube-logo-thin {
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%22m162.22%20124.67l-48-32A4%204%200%200%200%20108%2096v64a4%204%200%200%200%202.11%203.53a4%204%200%200%200%204.11-.2l48-32a4%204%200%200%200%200-6.66M116%20152.53v-49.06L152.79%20128Zm114.46-82a20%2020%200%200%200-12.06-13.68C184.6%2043.79%20130.27%2044%20128%2044s-56.6-.21-90.4%2012.85a20%2020%200%200%200-12.06%2013.67C23%2080.27%2020%2098.16%2020%20128s3%2047.73%205.54%2057.48a20%2020%200%200%200%2012.06%2013.67C71.4%20212.21%20125.73%20212%20128%20212h.71c6.89%200%2057.58-.43%2089.72-12.85a20%2020%200%200%200%2012.06-13.67C233%20175.72%20236%20157.84%20236%20128s-3-47.73-5.54-57.48Zm-7.74%20113a12%2012%200%200%201-7.21%208.22C183.14%20204.19%20128.57%20204%20128%20204s-55.11.19-87.48-12.31a12%2012%200%200%201-7.21-8.22C30.87%20174.17%2028%20157%2028%20128s2.87-46.17%205.28-55.47a12%2012%200%200%201%207.21-8.22C72.86%2051.81%20127.43%2052%20128%2052s55.11-.2%2087.48%2012.31a12%2012%200%200%201%207.21%208.22C225.13%2081.83%20228%2099%20228%20128s-2.87%2046.17-5.28%2055.47Z%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%22m162.22%20124.67l-48-32A4%204%200%200%200%20108%2096v64a4%204%200%200%200%202.11%203.53a4%204%200%200%200%204.11-.2l48-32a4%204%200%200%200%200-6.66M116%20152.53v-49.06L152.79%20128Zm114.46-82a20%2020%200%200%200-12.06-13.68C184.6%2043.79%20130.27%2044%20128%2044s-56.6-.21-90.4%2012.85a20%2020%200%200%200-12.06%2013.67C23%2080.27%2020%2098.16%2020%20128s3%2047.73%205.54%2057.48a20%2020%200%200%200%2012.06%2013.67C71.4%20212.21%20125.73%20212%20128%20212h.71c6.89%200%2057.58-.43%2089.72-12.85a20%2020%200%200%200%2012.06-13.67C233%20175.72%20236%20157.84%20236%20128s-3-47.73-5.54-57.48Zm-7.74%20113a12%2012%200%200%201-7.21%208.22C183.14%20204.19%20128.57%20204%20128%20204s-55.11.19-87.48-12.31a12%2012%200%200%201-7.21-8.22C30.87%20174.17%2028%20157%2028%20128s2.87-46.17%205.28-55.47a12%2012%200%200%201%207.21-8.22C72.86%2051.81%20127.43%2052%20128%2052s55.11-.2%2087.48%2012.31a12%2012%200%200%201%207.21%208.22C225.13%2081.83%20228%2099%20228%20128s-2.87%2046.17-5.28%2055.47Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/youtube-logo-thin.svg?color=%231a73e8&size=48
