youtube logo

youtube from Font Awesome Brands by Dave Gandy · Brand · Audio & Video · CC-BY-4.0 Attribution required.

Name
youtube
Set
Font Awesome Brands
Style
Brand
Category
Audio & Video
Viewbox
640×640
License
CC BY 4.0

The same logo in other sets

youtube-fillAkar Iconsyoutube-filledAnt Design IconsyoutubeBootstrap IconsyoutubeBoxicons BrandsyoutubeCoreUI BrandsyoutubeFont Awesome 6 BrandsyoutubeFeather Iconsyoutube-solidFlowbite Iconsyoutubecss.ggyoutubeHuge IconsyoutubeIconParkyoutubeIconPark OutlineyoutubeIconPark SolidyoutubeIconPark TwoToneyoutubeIconoiryoutubeJam IconsyoutubeLine AwesomeyoutubeMaterial Line IconsyoutubeSVG LogosyoutubeLucideyoutubeMage IconsyoutubeMaterial Design Iconsyoutube-fillMingCute IconyoutubeMyna UI Icons

More audio & video icons from Font Awesome Brands

youtube-shortsyoutube-square

Use the youtube logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M581.7 188.1c-6.2-23.7-24.8-42.3-48.3-48.6C490.9 128 320.1 128 320.1 128s-170.8 0-213.4 11.5c-23.5 6.3-42 24.9-48.3 48.6C47 231 47 320.4 47 320.4s0 89.4 11.4 132.3c6.3 23.6 24.8 41.5 48.3 47.8C149.3 512 320.1 512 320.1 512s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8c11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zM264.2 401.6V239.2l142.7 81.2z"/></svg>

React

import type { SVGProps } from "react";

export function Fa7BrandsYoutube(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M581.7 188.1c-6.2-23.7-24.8-42.3-48.3-48.6C490.9 128 320.1 128 320.1 128s-170.8 0-213.4 11.5c-23.5 6.3-42 24.9-48.3 48.6C47 231 47 320.4 47 320.4s0 89.4 11.4 132.3c6.3 23.6 24.8 41.5 48.3 47.8C149.3 512 320.1 512 320.1 512s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8c11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zM264.2 401.6V239.2l142.7 81.2z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M581.7 188.1c-6.2-23.7-24.8-42.3-48.3-48.6C490.9 128 320.1 128 320.1 128s-170.8 0-213.4 11.5c-23.5 6.3-42 24.9-48.3 48.6C47 231 47 320.4 47 320.4s0 89.4 11.4 132.3c6.3 23.6 24.8 41.5 48.3 47.8C149.3 512 320.1 512 320.1 512s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8c11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zM264.2 401.6V239.2l142.7 81.2z"/></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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M581.7%20188.1c-6.2-23.7-24.8-42.3-48.3-48.6C490.9%20128%20320.1%20128%20320.1%20128s-170.8%200-213.4%2011.5c-23.5%206.3-42%2024.9-48.3%2048.6C47%20231%2047%20320.4%2047%20320.4s0%2089.4%2011.4%20132.3c6.3%2023.6%2024.8%2041.5%2048.3%2047.8C149.3%20512%20320.1%20512%20320.1%20512s170.8%200%20213.4-11.5c23.5-6.3%2042-24.2%2048.3-47.8c11.4-42.9%2011.4-132.3%2011.4-132.3s0-89.4-11.4-132.3zM264.2%20401.6V239.2l142.7%2081.2z%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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M581.7%20188.1c-6.2-23.7-24.8-42.3-48.3-48.6C490.9%20128%20320.1%20128%20320.1%20128s-170.8%200-213.4%2011.5c-23.5%206.3-42%2024.9-48.3%2048.6C47%20231%2047%20320.4%2047%20320.4s0%2089.4%2011.4%20132.3c6.3%2023.6%2024.8%2041.5%2048.3%2047.8C149.3%20512%20320.1%20512%20320.1%20512s170.8%200%20213.4-11.5c23.5-6.3%2042-24.2%2048.3-47.8c11.4-42.9%2011.4-132.3%2011.4-132.3s0-89.4-11.4-132.3zM264.2%20401.6V239.2l142.7%2081.2z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fa7-brands/youtube.svg?color=%231a73e8&size=48