Create Instagram Logo/Icon Using HTML And CSS Code
Hello, guys welcome to Code With Random blog, today we will learn about How To Create An Instagram Logo/Icon In HTML and CSS Code. We have used only the div tag in HTML and Rest has been done In CSS. We will use pure CSS to make this logo.
50+ HTML, CSS & JavaScript Projects With Source Code
Code by | Frontend Everything |
Project Download | Link Available Below |
Language used | HTML and CSS |
External link / Dependencies | YES |
Responsive | YES |
this is an animated Instagram logo using HTML and CSS. Everybody is aware that any software must have an icon to indicate its purpose.
Therefore, Instagram is a social networking platform that enables users to communicate with their friends, family, and other acquaintances. We made the decision to create an animated Instagram logo.
Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

In CSS We have used:: before and:: after pseudo-elements for circles. Hope You will enjoy it!
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
Instagram Logo Code Html:-
1. Create Two Divs
<div class="insta"><div class="innerbox"></div></div>
The HTML part is this only! The first div tag with the “install” class is used for the box Instagram and the child div tag with the “inner box” class is used for borders and circles.
- First, we’ll include a link to our CSS file’s external file in the HTML head section.
- Now that we have a link to our logo in the body section, we can arrange our website using the <i> tag with the id “logo”.
- Right now, the output is blank, so we’ll add some temporary material to it to let you understand that we’ve introduced a structure to our webpage.
Instagram Icon Css Code:-
2. Reset And Centering In CSS
/* Css reset */ * { margin: 0; padding: 0; box-sizing: border-box; } /* centering the insta logo */ body { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; overflow: hidden; }
We will first do a CSS reset and center our content vertically and horizontally.
Hamburger Menu Using HTML,CSS and JavaScript
3. Customizing Our Logo Box
/* main box of insta */ .insta { width: 150px; height: 150px; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); border-radius: 35px; display: grid; place-items: center; }
Now, We will Give Instagram logos, height, width, background, and border-radius.
Output

4. Giving The Logo, Inner Border
5. Circles Of Logo With: before and: after
/* center circle of insta */ .innerbox::before { content: ''; width: 45px; height: 45px; border: 10px solid #fff; border-radius: 50%; background: transparent; position: absolute; } /* top right circle of insta */ .innerbox::after { content: ''; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: #fff; position: absolute; top: 8px; right: 10px; }
Lastly, We have to make a small and large circle with the help of: before and: after! And Congratulations! Your Logo Is Ready.
Final Output Of Instagram Logo/Icon Using HTML And CSS Code:-

Video Output:-
Live Preview Of Instagram Logo/Icon Using HTML And CSS Code:-
Restaurant Website Using HTML and CSS
Conclusion
In this article, we have learned how to make an Instagram logo using HTML and CSS Code. Thanks for showing your Interest I hope Guys You Liked this article and learn something so please send your feedback and also follow our Instagram for more content
Written By: Frontend Everything (Piyush)
Thank You And Happy Learning!!!
Which code editor do you use for this Instagram logo project coding?
I personally recommend using VS Code Studio, it’s very simple and easy to use.
ADVERTISEMENT
is this project responsive or not?
Yes! this project is a responsive project.
ADVERTISEMENT
Do you use any external links to create this project?
Yes!
ADVERTISEMENT
This was really awesome