How To Create Social Media Icon With CSS?

In this post we will learn to create different social media icons with CSS.

Instagram Icon with CSS

HTML

<div class="container">
  <div class="icon">
    <div class="square">
      <div class="circle"></div>
      <div class="dot"></div>
    </div>
  </div>
</div>

CSS

body{
    margin: 0;
    padding: 0;
}
.container{
    width: 800px;
    height: 100vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.icon{
    width: 250px;
    height: 250px;
    border-radius: 70px;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    position: relative;
}
.square{
    width: 180px;
    height: 180px;
    border: 15px solid #fff;
    border-radius: 70px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.circle{
    width: 80px;
    height: 80px;
    border: 15px solid #fff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
.dot{
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 15%;
    left: 75%;
}

Facebook Icon with CSS

I got Facebook Color code from https://usbrandcolors.com/facebook-colors/

HTML

<div class="logo">
  <div class="horizontal"></div>
  <div class="logo_cut"></div>
</div>

CSS

html{ 
    box-sizing: border-box;
}
*, *::before, *::after{
    box-sizing: inherit;
}
body{
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo{
    width: 300px;
    height: 300px;
    background-color: #4267B2;
    border-radius: 25px;
    position: relative
}
.horizontal{
    width: 250px;
    height: 320px;
    border: 50px solid #fff;
    border-radius: 65px;
    position: absolute;
    bottom: -60px;
    left: 110px;
}
.horizontal::before{
    content: '';
    width: 92px;
    height: 53px;
    background: #4267B2;
    position: absolute;
    top: -50px;
    left: 48px;
}
.horizontal::after{
    content: '';
    width: 135px;
    height: 45px;
    background: #fff;
    position: absolute;
    top: 42px;
    left: -85px;
}
.logo_cut{
    width: 62px;
    height: 10px;
    background: #4267B2;
    position: absolute;
    top: 150px;
    right: 60px;
    transform: rotate(-82deg);
} 

YouTube Icon with CSS

HTML

<div class="container">
  <div class="icon">
    <div class="top_bottom_border"></div>
    <div class="left_right_border"></div>
    <div class="play_btn"></div>
  </div>
</div>

CSS

html{
    box-sizing: border-box;
}
*, *::before, *::after{
    box-sizing: inherit;
}
body{
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container{
    width: 350px;
    height: 350px;
    background: #ff0100;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon{
    width: 220px;
    height: 140px;
    position: relative;
}
.top_bottom_border{
    background-color: #fff;
    width: 220px;
    height: 140px;
    position: absolute;
    border-top-left-radius: 100px 15px;
    border-top-right-radius: 100px 15px;
    border-bottom-left-radius: 100px 15px;
    border-bottom-right-radius: 100px 15px;
}
 .left_right_border{
    background-color: #fff;
    width: 248px;
    height: 115px;
    position: absolute;
    top: 12px;
    left: -14px;
    border-top-left-radius: 30px 100px;
    border-top-right-radius: 30px 100px;
    border-bottom-left-radius: 30px 100px;
    border-bottom-right-radius: 30px 100px;
}
.play_btn{
    width: 80px;
    height: 80px;
    border-top: 40px solid transparent;
    border-right: 40px solid transparent;
    border-left: 40px solid #ff0100;
    border-bottom: 40px solid transparent;
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translateY(-50%);
}