17+ CSS YouTube Logo Examples

This post contains a total of 17+ CSS YouTube Logo Examples with Source Code. All these YouTube logos are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS YouTube Logo Examples

1. YouTube Logo CSS Animation

Made by Omar Dsooky. YouTube CSS Logo with animations. Hovering over the logo will display the animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<link href="https://fonts.googleapis.com/css?family=Advent+Pro|Anton|Fjalla+One|Francois+One|Oswald|Ramabhadra|Tauri|Teko|Ubuntu+Condensed" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Courgette|Kaushan+Script|Marck+Script|Pacifico|Sacramento" rel="stylesheet">
<style>
.container {
	position: relative;
	width: 300px;
	margin: 2em auto;
	text-align: center;
	
}

p {
	font-family: 'Teko', sans-serif;
	font-size: 100px;
	z-index: 1;
	color: #282828;
	
}

span.after,
span.before{
	position: absolute;
	z-index: -1;
	
}

.container .after {
	top: 12%;
	left: 43%;
	width: 52%;
	height: 65%;
	background: #FF0000;
	border-radius: 25px / 25px;
/* 	animation: mv 1s linear forwards; */

}

.container span.tube {
	color: #FFF;
	margin-left: 10px;
	
/* 	animation: textcolor 0.30s linear forwards; */
}
	@keyframes textcolor {
		100%  {color: #282828;}}

.container span.before {
	background: #FF0000;
	top: 32.5%;
	left: -20%;
	border: 18px solid transparent;
	border-left: 30px solid #FFFFFF;
	z-index: 33;
	color: #FFFFFF;
	visibility: hidden;
/* 	animation: visibilityBefore 1s linear 0.85s forwards; */

}

@keyframes mv {
	10%{transform: translatex(-10px);}
	50%{transform: translatex(-50px);}
	100% {
	top: 23%;
	width: 100px;
	height: 65px;
	border-radius: 15px / 20px;
	transform: translatex(-230px);
	z-index: 2;
	}}

	@keyframes visibilityBefore {
  100%  {visibility: visible;}}


.container:hover{cursor: pointer;}
.container:hover span.tube{
	animation: textcolor 0.30s linear forwards;
	margin-left: 0;
}

.container:hover span.before{
	animation: visibilityBefore 0.4s linear .25s forwards;
}

.container:hover span.after{
	animation: mv 0.25s linear forwards;
}

 p.msg {
	font-size: 25px;
	border: 2px dashed #282828;
	display: inline-block;
	padding: 10px;
	color: #282828;
	
}

*,
*:after,
*:before {
	transform: translateZ(0);
}
</style>
</head>

<body translate="no" >
  <div class="container">
	
	<span class="before"></span>
		<p class="you">You<span class="tube">Tube</span></p>
	<span class="after"></span> 
	
</div>
<p class="msg">Hover Logo</p>

</body>
</html>
 

2. YouTube logo CSS

Made by LeonimuZ. Old Youtube logo made using CSS. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Oswald'>
  
<style>
/*=======================================================
    A stylesheet by:
    Leon Taveras (LeonimuZ) || http://be.net/lnz
 
    Includes styles from:
    YUI Pure, H5bp, Foundation, CSS-Tricks.com
    & SachaGreif.com
=======================================================*/

body {
	background: #E4E4E4 url(https://raw.github.com/subtlepatterns/SubtlePatterns/master/cardboard_flat.png) repeat;
}

#content {
	margin: 5px auto;
	width: 960px;
	text-align: center;
}

h1 {
	font-family: "Oswald", sans-serif;
	font-size: 150px;
}

.you {
	letter-spacing: -8px;
	text-shadow: 0 2px 0 white;
}

.tube {
	position: relative;
	padding: 0 15px;
	background-image: -webkit-linear-gradient(bottom, rgb(109, 2, 2) 22%, rgb(201, 0, 0) 61%);
	background-image: -moz-linear-gradient(bottom, rgb(109, 2, 2) 22%, rgb(201, 0, 0) 61%);
	background-image: -o-linear-gradient(bottom, rgb(109, 2, 2) 22%, rgb(201, 0, 0) 61%);
	background-image: -ms-linear-gradient(bottom, rgb(109, 2, 2) 22%, rgb(201, 0, 0) 61%);
	background-image: linear-gradient(bottom, #6D0202 22%, rgb(201, 0, 0) 61%);
	color: #fff;
	letter-spacing: -6px;
	text-shadow: 0 3px 0 #000;
	border-radius: 50% / 11%;
	box-shadow: 0px 15px 20px -5px rgba(0, 0, 0, 0.67);
}

.tube::before {
	content: "Tube";
	line-height: 172px;
	position: absolute;
	top: 10%;
	bottom: 10%;
	right: -5%;
	left: -4.5%;
	background: inherit;
	border-radius: 5% / 50%;
}
</style>
</head>

<body translate="no" >
  <div id="content">
	<h1>
    <span class="you">You</span>
    <span class="tube">Tube</span>
  </h1>
</div>
</body>
</html>
 

3. Chrome YouTube logo

Made by Daniel Imms. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title> 
<style>
#youtube, #youtube:before {
  background-color: #E35044;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2UzNTA0NCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q2M2UzMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(1%, #e35044), color-stop(100%, #d63e30));
  background-image: -moz-linear-gradient(left top, #e35044 1%, #d63e30 100%);
  background-image: -webkit-linear-gradient(left top, #e35044 1%, #d63e30 100%);
  background-image: linear-gradient(to right bottom, #e35044 1%, #d63e30 100%);
}

#youtube {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 66px;
  margin-left: -50px;
  margin-top: -34px;
  border-top-left-radius: 15px 50%;
  border-top-right-radius: 15px 50%;
  border-bottom-left-radius: 15px 50%;
  border-bottom-right-radius: 15px 50%;
}
#youtube:before {
  position: absolute;
  content: " ";
  border-top-left-radius: 50% 2px;
  border-top-right-radius: 50% 2px;
  border-bottom-left-radius: 50% 2px;
  border-bottom-right-radius: 50% 2px;
  width: 70px;
  height: 70px;
  left: 15px;
  top: -2px;
}
#youtube:after {
  position: absolute;
  content: " ";
  border-top: transparent 18px solid;
  border-bottom: transparent 18px solid;
  border-left: #F2F0E6 28px solid;
  top: 50%;
  left: 50%;
  margin-top: -18px;
  margin-left: -11px;
}
</style>
</head>
<body translate="no" >
  <div id='youtube'></div>
</body>
</html>

4. YouTube Go logo

Made by K D. Source

<!DOCTYPE html>
<html>
    <head>
        <title>Youtube Go Logo</title>
    <style>
        #logo{
    height:140px;
    width:260px;
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:-10px;
    right:0;
}
#t1{
    height:0;
    width:0;
    border-top:70px solid transparent;
    border-bottom:70px solid transparent;
    border-right:180px solid red;
}
#t2{
    position:relative;
    top:-140px;
    left:30px;
    height:0;
    width:0;
    border-top:30px solid transparent;
    border-bottom:40px solid transparent;
    border-right:150px solid red;
}
#c1{
    position:relative;
    top:-210px;
    left:120.5px;
    height:140px;
    width:140px;
    background-color:red;
    border-radius:50%;
}
#t3{
    position:relative;
    top:40px;
    left:55px;
    height:0;
    width:0;
    border-top:30px solid transparent;
    border-bottom:30px solid transparent;
    border-left:50px solid white;
}
        </style>
    </head>
    <body>
        <div id="logo">
            <div id="t1"></div>
            <div id="t2"></div>
            <div id="c1">
                <div id="t3"></div>
            </div>
        </div>
    </body>
</html>

5. YouTube logo [Just CSS]

Made by Gabriel Ferreira. Logo with a little bit of animation on hover. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url("https://fonts.googleapis.com/css?family=Pathway+Gothic+One&subset=latin-ext");
.logo {
  margin: 20px;
}
.logo .content {
  position: relative;
}
.logo .content h1 {
  margin: 0;
  display: inline-block;
  font-size: 10em;
  font-family: "Pathway Gothic One", sans-serif;
  user-select: none;
}
.logo .content h1:nth-child(2) {
  height: 150px;
  background-image: -webkit-linear-gradient(bottom, #bf2126 22%, #e12d28 61%);
  background-image: -moz-linear-gradient(bottom, #bf2126 22%, #e12d28 61%);
  background-image: -o-linear-gradient(bottom, #bf2126 22%, #e12d28 61%);
  background-image: -ms-linear-gradient(bottom, #bf2126 22%, #e12d28 61%);
  background-image: linear-gradient(bottom, #bf2126 22%, #e12d28 61%);
  padding: 20px;
  border-radius: 50%/11%;
  color: white;
  position: absolute;
  top: 10px;
  left: 200px;
  color: transparent;
}
.logo .content h1:nth-child(2):hover {
  animation: animation-logo 150ms infinite alternate;
}
.logo .content h1:nth-child(2):before {
  content: "Tube";
  color: white;
  line-height: 0.9;
  padding-left: 30px;
  border-radius: 5%/50%;
  background: inherit;
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: -5%;
  left: -4.5%;
}

@keyframes animation-logo {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(3%);
  }
}
</style>

</head>
<body translate="no" >
  <div class="logo">
  <div class="content">
    <h1>You</h1>
    <h1>Tube</h1>
  </div>
</div>
</html>

6. YouTube Logo with Animation

Made by David. A css YouTube logo with amazing animation, it also uses a little bit of JavaScript. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i");
*, *:before, *:after {
  box-sizing: border-box;
}

html {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
  background: #CC4C50;
  overflow: hidden;
}

.app {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}
.app .youtube {
  z-index: 5;
  opacity: 0;
  position: relative;
  width: 150px;
  height: 100px;
  background: #FFF;
  border-radius: 50%/10%;
  color: #CC4C50;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.app .youtube span {
  opacity: 0;
  position: absolute;
  font-size: 3.5em;
  font-weight: 700;
  z-index: 999;
}
.app .youtube .you {
  position: absolute;
  color: #FFF;
  top: -75px;
  z-index: 6;
}
.app .youtube:after {
  content: "";
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: -5%;
  left: -5%;
  background: inherit;
  border-radius: 5%/50%;
}
</style>

</head>
<body>
  <div class="app">
  <div class="youtube"><span class="you">You</span><span class="tube">Tube</span></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TimelineMax.min.js'></script>
      <script id="rendered-js" >
$(function () {
  let $y = $('.youtube'),
  $you = $('.you'),
  $tube = $('.tube'),
  $app = $('body');

  let $tl = new TimelineMax({ delay: 1, repeat: 0 });

  $tl.to($y, 0.1, { autoAlpha: 1 }).
  add(TweenMax.fromTo($y, 0.30, { x: -50 }, { x: 50, repeat: 3, yoyo: true, ease: Sine.easeInOut, onComplete: function () {TweenMax.to(this.target, 1, { x: 0, ease: Elastic.easeOut });} })).
  add(TweenMax.fromTo($tube, 0.15, { autoAlpha: 0, x: -150 }, { autoAlpha: 1, x: -25, repeat: 2, yoyo: true, ease: Sine.easeInOut, onComplete: function () {TweenMax.to(this.target, 1, { x: 0, ease: Elastic.easeOut });} }, "-=1")).
  fromTo($you, 1, { autoAlpha: 0, y: 75 }, { autoAlpha: 1, y: 0, ease: Bounce.easeOut });

});
    </script>
</body>
</html>

7. Youtube Logo in Css

Made by Shreyas. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
<style>
.logo{
  margin: 200px auto;
  height: 150px;
  width: 220px;
  background: red;
  		border-radius: 17% 17% 19% 17% / 31% 33% 35% 32%;
}
.it{
  position: relative;
  top: 50px;
  left: 93px;
  width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-left: 50px solid white;
	border-bottom: 25px solid transparent;
}
</style>

</head>
<body>
  <div class="logo">
  <div class="it"></div>
</div>
</body>
</html>

8. YouTube Kids logo

Made by KD. Source

<!DOCTYPE html>
<html>
    <head>
        <title>Youtube Kids Logo</title>
        <style>
            #red{
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
    height:150px;
    width:215px;
    background-color:red;
    border:6px solid black;
    border-radius:30px;
    transform:rotate(-5deg);
}
#triangle1{
    position:relative;
    top:25px;
    left:77.5px;
    height:0;
    width:0;
    border-top:50px solid transparent;
    border-bottom:50px solid transparent;
    border-left:80px solid black;
}
#triangle2{
    position:relative;
    top:-40px;
    left:-74.5px;
    height:0;
    width:0;
    border-top:40px solid transparent;
    border-bottom:40px solid transparent;
    border-left:64px solid white;
}
            </style>
    </head>
    <body>
        <div id="red">
            <div id="triangle1">
                <div id="triangle2"></div>
            </div>
        </div>
    </body>
</html>

9. Youtube Logo Animation

Made by Parth Panchal. YouTube logo with spinning effect animations. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body{
	margin: 0;
	padding: 0;
}
.youtube{
	width: 170px;
	height: 125px;
	background-color: #FF0000;
position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
	border-radius: 48px;
	transition: 0.2s all ease-out;
}
.youtube > .triangle{
	width: 0;
	height: 0;
	border-style: solid;
	position: absolute;
	top: 25%;
	left: 37%;
	border-width: 30px 0px 30px 60px;
	border-color: transparent transparent transparent #ffffff;
}
.youtube:hover > .triangle{
	transform: rotate(-360deg);
	transition: 0.5s all ease-in;
}
.youtube:hover{
	-webkit-box-shadow: 30px 30px 60px -10px rgba(255,87,87,0.70);
	-moz-box-shadow: 30px 30px 60px -10px rgba(255,87,87,0.70);
	box-shadow: 30px 30px 60px -10px rgba(255,87,87,0.70);
	border-radius: 3px;
	transition: 0.5s all ease-in;
}
</style>

</head>
<body translate="no" >
  <div class="youtube">
		<div class="triangle"></div>
	</div>
</body>
</html>

10. YouTube Logo Animation Hover Effect

Made by Sk Orko. YouTube logo with sliding animation and hover effects. Source

<!DOCTYPE html>
<html lang="en-US" >
	<head>

		<title>YouTube Hover Effect</title>
		<link rel="stylesheet" href="Style.css"
		type="text/css" />
	  <link href="https://fonts.googleapis.com/css?family=Fjalla+One&display=swap" 
        rel="stylesheet">
        <style>
            *{
	margin:0;
	padding:0;
	font-family: 'Fjalla One', sans-serif;
	}
body{
	height:100vh;
	display:flex;
	justify-content:center;
	align-items:center;
	background-color:#fff;
	}
.container {
	position:relative;
	width:220px;
	height:60px;
	text-align:center;
	}
.container:hover p{
	transform:translateX(-30px);
	top:18%;
	}
.container:hover p span {
	color:black;
	margin-left:-07px;
	}
.container:hover .yt-avtr{
	left:22%;
	width:55px;
	height:38px;
	}
.container:hover .yt-avtr-play{
	opacity:1;
	}
.container p {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	font-size:28px;
	transition:0.5s ease-in-out;
	}
.container p span {
	color:white;
	transition:0.6s ease-in-out;
	}
.container .yt-avtr{
	position:absolute;
	width:65px;
	height:45px;
	border-radius:10px;
	background:red;
	top:48%;
	left:61%;
	transform:translate(-50%,-50%);
	mix-blend-mode:screen;
	transition:0.5s ease-in-out;
	}
.yt-avtr-play {
	position:absolute;
	top:25%;
	left:45%;
	transform:translate(-50%,-50%);
	border-top:10px solid white; 
  border-right:10px solid transparent; 
  border-bottom:10px solid transparent; 
  border-left:10px solid transparent; 
  transform:rotate(-90deg);
  opacity:0;
  transition:1s;
	}
            </style>
	</head>
<body>
	
  <div class="container" >
		    <p>You <span>Tube </span></p>
	  <div class="yt-avtr"  >
      <div class="yt-avtr-play" ></div>
    </div>
 	</div>
	
</body>
</html>

11. Simple YouTube Logo

Made by Chandan. Logo without any animation or effects. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - YouTube Logo</title>
<style>
body {
        margin: 0;
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: black;
    }

    .youtube {
        position: relative;
        width: 200px;
        height: 150px;
        margin: 20px 0;
        background: red;
        border-radius: 49% / 11%;
        color: white;
        text-align: center;
        text-indent: .1em;
    }

    .youtube:before {
        content: "";
        position: absolute;
        top: 10%;
        bottom: 10%;
        right: -5%;
        left: -5%;
        background: inherit;
        border-radius: 5% / 50%;
    }

    .triangle {
        position: absolute;
        left: 40%;
        top: 30%;
        width: 0;
        height: 0;
        border-top: 28px solid transparent;
        border-left: 56px solid white;
        border-bottom: 28px solid transparent;
        border-radius: 0px;
    }
</style>
</head>

<body>
  <div class="youtube">
        <div class="triangle"></div>
    </div>
</body>
</html>

12. YouTube logo in CSS

Made by Maurice Melchers. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@font-face {
  font-family: "AltGothic";
  src: url("https://rawgit.com/chriswjones/jones-remote/master/JonesRemote/Resources/Alternate-Gothic-No2.ttf") format("truetype");
}
body {
  height: 100vh;
  background: #fff;
  background: #333 radial-gradient(ellipse at center, white 0%, rgba(255, 255, 255, 0.75) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "AltGothic", Gothic, Sans-serif;
}

.container {
  flex: 0 0 auto;
  width: 500px;
  height: 210px;
}

h1 {
  margin: 0;
  color: white;
}

.logo span {
  display: inline-block;
  color: #FFF;
  z-index: 100;
  position: relative;
}
.logo p {
  margin: 0;
  font-size: 50px;
  letter-spacing: -0.02em;
  font-size: 200px;
  white-space: nowrap;
}
.logo p strong {
  display: inline-block;
  position: relative;
  margin-left: 0.17em;
  font-weight: normal;
}
.logo p strong:after, .logo p strong:before {
  display: block;
  background: #E32E28;
  background-image: linear-gradient(to bottom, #E32E28 0%, #BE2126 100%);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
}
.logo p strong:before {
  border-radius: 50%/5%;
  left: -0.06em;
  right: -0.06em;
  top: 0em;
  bottom: 0em;
}
.logo p strong:after {
  border-radius: 3%/50%;
  top: 0.06em;
  left: -0.1em;
  right: -0.1em;
  bottom: 0.06em;
}
</style>

</head>
<body>
  <div class="container">
  <div class="logo">
    <p contenteditable="true">You<strong><span>Tube</span></strong></p>
  </div>
</div>
</body>
</html>

13. YouTube logo Basic

Made by Mahi. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
  background: #d1c9c9;
  overflow: hidden;
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#logo-icon-container.logo {
  width: 700px;
}

div.logo {
  margin: auto;
  width: 50%;
}

div.logo h1 {
  top: 50%;
  margin: 0;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 20px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
}

main {
  display: block;
  position: relative;
  width: 50rem;
  margin: 3vh auto;
  padding: 1.5rem 0 0;
  border-radius: 0.25rem;
  transform: scale(0.75);
  transform-origin: center 3rem;
  transition: transform 0.3s;
}
</style>
</head>

<body>
  <center>
	<main>
		<div id="logo-icon-container" class="logo">
			<svg viewBox="0 0 200 60">

				<!--YT Logo-->
				<path fill="#FF0000" d="M63,14.87c-0.72-2.7-2.85-4.83-5.56-5.56C52.54,8,32.88,8,32.88,8S13.23,8,8.32,9.31c-2.7,0.72-4.83,2.85-5.56,5.56C1.45,19.77,1.45,30,1.45,30s0,10.23,1.31,15.13c0.72,2.7,2.85,4.83,5.56,5.56
             C13.23,52,32.88,52,32.88,52s19.66,0,24.56-1.31c2.7-0.72,4.83-2.85,5.56-5.56C64.31,40.23,64.31,30,64.31,30
             S64.31,19.77,63,14.87z" class="youtube-path">
				</path>

				<!--Youtube Logo Inner Thingie -->
				<polygon fill="#FFFFFF" points="26.6,39.43 42.93,30 26.6,20.57" class="youtube-path">
				</polygon>

				<!--Youtube Letter 'Y'-->
				<path fill="#282828" d="M77.59,36.61l-7.06-25.49h6.16l2.47,11.55c0.63,2.85,1.09,5.27,1.39,7.28h0.18
             c0.21-1.44,0.67-3.85,1.39-7.24l2.56-11.6h6.16L83.7,36.61v12.23h-6.11V36.61z" class="youtube-path">
				</path>

				<!--Youtube Letter 'o'-->
				<path fill="#282828" d="M92.69,48.03c-1.24-0.84-2.13-2.14-2.65-3.91c-0.52-1.77-0.79-4.12-0.79-7.06v-4
             c0-2.97,0.3-5.35,0.9-7.15c0.6-1.8,1.54-3.11,2.81-3.93c1.27-0.82,2.94-1.24,5.01-1.24c2.04,0,3.67,0.42,4.9,1.26
             c1.23,0.84,2.13,2.15,2.7,3.93c0.57,1.78,0.85,4.16,0.85,7.12v4c0,2.94-0.28,5.3-0.83,7.08c-0.55,1.78-1.45,3.09-2.7,3.91
             c-1.24,0.82-2.93,1.24-5.06,1.24C95.65,49.29,93.93,48.87,92.69,48.03z M99.66,43.71c0.34-0.9,0.52-2.37,0.52-4.4v-8.59
             c0-1.98-0.17-3.42-0.52-4.34c-0.34-0.91-0.95-1.37-1.82-1.37c-0.84,0-1.43,0.46-1.78,1.37c-0.34,0.91-0.52,2.36-0.52,4.34v8.59
             c0,2.04,0.16,3.51,0.49,4.4c0.33,0.9,0.93,1.35,1.8,1.35C98.71,45.06,99.31,44.61,99.66,43.71z" class="youtube-path">
				</path>

				<!--Youtube Letter 'u'-->
				<path fill="#282828" d="M126.45,21.28v27.55h-4.85l-0.54-3.37h-0.13c-1.32,2.55-3.3,3.82-5.93,3.82c-1.83,0-3.18-0.6-4.05-1.8
             c-0.87-1.2-1.3-3.07-1.3-5.62V21.28h6.2v20.23c0,1.23,0.13,2.11,0.4,2.63c0.27,0.52,0.72,0.79,1.35,0.79
             c0.54,0,1.06-0.16,1.55-0.49c0.49-0.33,0.86-0.75,1.1-1.26V21.28H126.45z" class="youtube-path">
				</path>

				<!--Youtube Letter 'T'-->
				<path fill="#282828" d="M143.31,16.11h-6.16v32.72h-6.07V16.11h-6.16v-4.99h18.38V16.11z" class="youtube-path">
				</path>

				<!--Youtube Letter 'u'-->
				<path fill="#282828" d="M158.27,21.28v27.55h-4.85l-0.54-3.37h-0.13c-1.32,2.55-3.3,3.82-5.93,3.82c-1.83,0-3.18-0.6-4.05-1.8
             c-0.87-1.2-1.3-3.07-1.3-5.62V21.28h6.2v20.23c0,1.23,0.13,2.11,0.4,2.63c0.27,0.52,0.72,0.79,1.35,0.79
             c0.54,0,1.06-0.16,1.55-0.49c0.49-0.33,0.86-0.75,1.1-1.26V21.28H158.27z" class="youtube-path">
				</path>

				<!--Youtube Letter 'b'-->
				<path fill="#282828" d="M178.8,25.69c-0.38-1.74-0.98-3-1.82-3.78c-0.84-0.78-1.99-1.17-3.46-1.17c-1.14,0-2.2,0.32-3.19,0.97
             c-0.99,0.64-1.75,1.49-2.29,2.54h-0.05l0-14.52h-5.98v39.11h5.12l0.63-2.61h0.13c0.48,0.93,1.2,1.66,2.16,2.2
             c0.96,0.54,2.02,0.81,3.19,0.81c2.1,0,3.64-0.97,4.63-2.9c0.99-1.93,1.48-4.95,1.48-9.06v-4.36
             C179.36,29.84,179.17,27.43,178.8,25.69z M173.11,36.93c0,2.01-0.08,3.58-0.25,4.72c-0.16,1.14-0.44,1.95-0.83,2.43
             c-0.39,0.48-0.91,0.72-1.57,0.72c-0.51,0-0.98-0.12-1.42-0.36c-0.43-0.24-0.79-0.6-1.06-1.08V27.71
             c0.21-0.75,0.57-1.36,1.08-1.84c0.51-0.48,1.06-0.72,1.66-0.72c0.63,0,1.12,0.25,1.46,0.74c0.34,0.49,0.58,1.33,0.72,2.49
             c0.13,1.17,0.2,2.83,0.2,4.99V36.93z" class="youtube-path">
				</path>

				<!--Youtube Letter 'e'-->
				<path fill="#282828" d="M188.16,37.13v1.39c0,1.77,0.05,3.09,0.16,3.98c0.1,0.88,0.32,1.53,0.65,1.93
             c0.33,0.4,0.84,0.61,1.53,0.61c0.93,0,1.57-0.36,1.91-1.08c0.34-0.72,0.53-1.92,0.56-3.6l5.35,0.31
             c0.03,0.24,0.04,0.57,0.04,0.99c0,2.55-0.7,4.45-2.09,5.71c-1.39,1.26-3.36,1.89-5.91,1.89c-3.06,0-5.2-0.96-6.43-2.88
             c-1.23-1.92-1.84-4.88-1.84-8.9v-4.81c0-4.14,0.64-7.15,1.91-9.06c1.27-1.9,3.45-2.85,6.54-2.85c2.13,0,3.76,0.39,4.9,1.17
             c1.14,0.78,1.94,1.99,2.41,3.64c0.46,1.65,0.7,3.93,0.7,6.83v4.72H188.16z M188.95,25.53c-0.31,0.39-0.52,1.03-0.63,1.91
             c-0.11,0.88-0.16,2.23-0.16,4.02v1.98h4.54v-1.98c0-1.77-0.06-3.11-0.18-4.02c-0.12-0.91-0.34-1.56-0.65-1.93
             c-0.31-0.37-0.8-0.56-1.46-0.56C189.75,24.94,189.26,25.14,188.95,25.53z" class="youtube-path">
				</path>
			</svg>
</body>
</html>

14. Youtube Studio Logo

Made by KD. YouTube Studio logo without any animation. Source

<!DOCTYPE html>
<html>
    <head>
        <title>Youtube Studio Logo</title>
    <style>
        #logo{
    height:250px;
    width:250px;
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
#spoke1,#spoke2,#spoke3{
    position:relative;
    left:90px;
    height:250px;
    width:70px;
    background-color:red;
    border-radius:5px;
}
#spoke2{
    top:-250px;
    transform:rotate(60deg);
}
#spoke3{
    top:-500px;
    transform:rotate(-60deg);
}
#circle{
    position:relative;
    top:-725px;
    left:25px;
    height:200px;
    width:200px;
    background-color:red;
    border-radius:50%;
}
#triangle{
    position:relative;
    top:55px;
    left:75px;
    height:0;
    width:0;
    border-top:45px solid transparent;
    border-bottom:45px solid transparent;
    border-left:75px solid white;
}
        </style>
    </head>
    <body>
        <div id="logo">
            <div id="spoke1"></div>
            <div id="spoke2"></div>
            <div id="spoke3"></div>
            <div id="circle">
                <div id="triangle"></div>
            </div>
        </div>
    </body>
</html>

15. YouTube icon Pure CSS

Made by Shounak. Simple CSS YouTube logo without any effects. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
  background: #ffcdd2;
}

.container {
  position: absolute;
  height: 200px;
  width: 250px;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
.container .yt-icon {
  background: #ff1f22;
  height: 200px;
  width: 250px;
  border-radius: 90%/10%;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
  position: relative;
}
.container .yt-icon::before {
  content: "";
  position: absolute;
  height: 180px;
  width: 278px;
  top: 10px;
  left: -14px;
  background: inherit;
  border-radius: 10%/90%;
  box-shadow: 30px 0 29px -30px rgba(0, 0, 0, 0.3), -30px 0 29px -30px rgba(0, 0, 0, 0.3);
}
.container .yt-icon .play-btn {
  position: absolute;
  left: 90px;
  top: 50px;
  width: 0;
  border-left: 81.6px solid #fff;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  transform: scale(0.8);
}
</style>

</head>
<body>
  <div class="container">
  <div class="yt-icon">
    <div class="play-btn"></div>
  </div>
</div>
</body>
</html>

16. YouTube Logo

Made by David Salazar. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
  background-color: #202020;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.all {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Roboto", sans-serif;
}

.logo {
  height: 100px;
  background-color: #ff0000;
  width: 150px;
  border-radius: 10% / 30%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo span {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 20px 40px;
  border-color: transparent transparent transparent #ffffff;
}

.letras {
  margin-left: 15px;
  color: #ffffff;
  font-size: 90px;
  letter-spacing: -1px;
}
</style>

</head>
<body>
  <div class="all">
  <div class="logo">
    <span></span>
  </div>
  <span class="letras">YouTube</span>
</div>
</body>
</html>

17. Old YouTube logo

Made by Phil Thompson. Old YouTube logo using css3. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
h1 {
  margin: 0 auto;
  font-family: arial;
  font-size: 10em;
}
h1 span {
  /*background-color: rgb(255,0,0);*/
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFF0000', endColorstr='#FF3C0000');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNjMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff0000), color-stop(100%, #3c0000));
  background-image: -moz-linear-gradient(top, #ff0000 0%, #3c0000 100%);
  background-image: -webkit-linear-gradient(top, #ff0000 0%, #3c0000 100%);
  background-image: linear-gradient(to bottom, #ff0000 0%, #3c0000 100%);
  padding: 5px;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  color: white;
}
</style>

</head>
<body>
  <h1>You<span>Tube</span></h1>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

</body>
</html>

18. Basic YouTube Logo

Made by zouraiz. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen -  YouTube Logo</title>

<style>
@import url('https://fonts.googleapis.com/css2?family=Raleway:[email protected];200;300;400;500;600;700;800;900&display=swap');
*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Raleway', Arial, sans-serif;
}
body
{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background:#fff;
  min-height: 100vh;
}
.youtube{
  height: 150px;
  width: 200px;
  background: red;
  margin: 100px auto;
  border-radius: 50% / 10%;
  position: relative;
}

.youtube::before{
  content: "";
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: -5%;
  right: -5%;
  background: red;
  border-radius: 5% / 50%;
}

.youtube::after{
  content: "";
  position: absolute;
  height: 2px;
  width: 2px;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 45px solid #ffff;
  top: 45px;
  right: 65px;
}
</style>

</head>
<body>
  <div class="youtube"></div>
</body>
</html>