youtube icon
youtube from Material Design Icons by Pictogrammers · Filled · Brand / Logo · Apache-2.0 Free for personal and commercial use.
- Name
- youtube
- Set
- Material Design Icons
- Style
- Filled
- Category
- Brand / Logo
- Viewbox
- 24×24
- License
- Apache 2.0
- Aliases
- video-youtube, youtube-play
The same icon in other sets
youtube-fillAkar Iconsyoutube-filledAnt Design IconsyoutubeBootstrap IconsyoutubeBoxicons BrandsyoutubeCoreUI BrandsyoutubeFont Awesome 6 BrandsyoutubeFont Awesome BrandsyoutubeFeather Iconsyoutube-solidFlowbite Iconsyoutubecss.ggyoutubeHuge IconsyoutubeIconParkyoutubeIconPark OutlineyoutubeIconPark SolidyoutubeIconPark TwoToneyoutubeIconoiryoutubeJam IconsyoutubeLine AwesomeyoutubeMaterial Line IconsyoutubeSVG LogosyoutubeLucideyoutubeMage Iconsyoutube-fillMingCute IconyoutubeMyna UI Icons
More brand / logo icons from Material Design Icons
Use the youtube icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m10 15l5.19-3L10 9zm11.56-7.83c.13.47.22 1.1.28 1.9c.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83c-.25.9-.83 1.48-1.73 1.73c-.47.13-1.33.22-2.65.28c-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44c-.9-.25-1.48-.83-1.73-1.73c-.13-.47-.22-1.1-.28-1.9c-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83c.25-.9.83-1.48 1.73-1.73c.47-.13 1.33-.22 2.65-.28c1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44c.9.25 1.48.83 1.73 1.73"/></svg>
React
import type { SVGProps } from "react";
export function MdiYoutube(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m10 15l5.19-3L10 9zm11.56-7.83c.13.47.22 1.1.28 1.9c.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83c-.25.9-.83 1.48-1.73 1.73c-.47.13-1.33.22-2.65.28c-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44c-.9-.25-1.48-.83-1.73-1.73c-.13-.47-.22-1.1-.28-1.9c-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83c.25-.9.83-1.48 1.73-1.73c.47-.13 1.33-.22 2.65-.28c1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44c.9.25 1.48.83 1.73 1.73"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m10 15l5.19-3L10 9zm11.56-7.83c.13.47.22 1.1.28 1.9c.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83c-.25.9-.83 1.48-1.73 1.73c-.47.13-1.33.22-2.65.28c-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44c-.9-.25-1.48-.83-1.73-1.73c-.13-.47-.22-1.1-.28-1.9c-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83c.25-.9.83-1.48 1.73-1.73c.47-.13 1.33-.22 2.65-.28c1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44c.9.25 1.48.83 1.73 1.73"/></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%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m10%2015l5.19-3L10%209zm11.56-7.83c.13.47.22%201.1.28%201.9c.07.8.1%201.49.1%202.09L22%2012c0%202.19-.16%203.8-.44%204.83c-.25.9-.83%201.48-1.73%201.73c-.47.13-1.33.22-2.65.28c-1.3.07-2.49.1-3.59.1L12%2019c-4.19%200-6.8-.16-7.83-.44c-.9-.25-1.48-.83-1.73-1.73c-.13-.47-.22-1.1-.28-1.9c-.07-.8-.1-1.49-.1-2.09L2%2012c0-2.19.16-3.8.44-4.83c.25-.9.83-1.48%201.73-1.73c.47-.13%201.33-.22%202.65-.28c1.3-.07%202.49-.1%203.59-.1L12%205c4.19%200%206.8.16%207.83.44c.9.25%201.48.83%201.73%201.73%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%22currentColor%22%20d%3D%22m10%2015l5.19-3L10%209zm11.56-7.83c.13.47.22%201.1.28%201.9c.07.8.1%201.49.1%202.09L22%2012c0%202.19-.16%203.8-.44%204.83c-.25.9-.83%201.48-1.73%201.73c-.47.13-1.33.22-2.65.28c-1.3.07-2.49.1-3.59.1L12%2019c-4.19%200-6.8-.16-7.83-.44c-.9-.25-1.48-.83-1.73-1.73c-.13-.47-.22-1.1-.28-1.9c-.07-.8-.1-1.49-.1-2.09L2%2012c0-2.19.16-3.8.44-4.83c.25-.9.83-1.48%201.73-1.73c.47-.13%201.33-.22%202.65-.28c1.3-.07%202.49-.1%203.59-.1L12%205c4.19%200%206.8.16%207.83.44c.9.25%201.48.83%201.73%201.73%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/mdi/youtube.svg?color=%231a73e8&size=48
