Table of Contents

ProblemSolutionHTMLCSSCodepen

CSS Icon: Android

Jatin Sharma

Jatin Sharma•July 18, 2022

2 min read•319 words

In this article, I will create a Android icon by using CSS only. Let's look at how we do that.

Problem

problem

Solution

First, we need to create the structure for this logo then we will style that structure.

HTML

index.html

<div class="wrapper">
  <div class="head"></div>
  <div class="center-square"></div>
  <div class="left-hand"></div>
  <div class="right-hand"></div>
  <div class="left-foot"></div>
  <div class="right-foot"></div>
  <div class="eye-left"></div>
  <div class="eye-right"></div>
  <div class="left-ear"></div>
  <div class="right-ear"></div>
</div>

Here we have an outer container .wrapper and it contains multiple parts of the logo.

CSS

Let's first style the .wrapper and .center-square:

styles.css

.wrapper {
  --bg: #222;
  --clr: #aac148;
  position: relative;
}
.center-square {
  width: 140px;
  height: 115px;
  border-radius: 5px;
  transform: translatey(16px);
  background: var(--clr);
}

image.png

Now let's just style left-hand, right-hand, left-foot and right-foot:

styles.css

.left-hand,
.right-hand,
.left-foot,
.right-foot {
  position: absolute;
  height: 95px;
  width: 30px;
  background: var(--clr);
  border-radius: 100px;
}
 
.left-hand {
  top: 0;
  left: 0;
  transform: translate(-37px, 16px);
}
 
.right-hand {
  top: 0;
  right: 0;
  transform: translate(37px, 16px);
}
 
.left-foot {
  left: 28px;
  margin-top: -25px;
}
 
.right-foot {
  margin-top: -25px;
  right: 28px;
}

image.png

Now adding head and eyes:

styles.css

.head {
  position: absolute;
  width: 100%;
  height: 70px;
  background: var(--clr);
  transform: translatey(-60px);
  border-radius: 100px 100px 5px 5px;
}
 
.eye-left,
.eye-right {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 100px;
  background: var(--bg);
  top: 0;
}
 
.eye-left {
  transform: translate(32px, -28px);
}
.eye-right {
  right: 0;
  transform: translate(-32px, -28px);
}

image.png

Now the last thing we need to add is ears:

styles.css

.left-ear,
.right-ear {
  position: absolute;
  width: 6px;
  height: 50px;
  border-radius: 100px;
  background: var(--clr);
  top: 0;
}
 
.left-ear {
  transform: translate(34px, -78px) rotate(-30deg);
}
 
.right-ear {
  right: 0;
  transform: translate(-34px, -78px) rotate(30deg);
}

After all this, now our final product is ready.

Codepen

previous Article

CSS Icon: Microsoft

Jatin's Newsletter

I write monthly Tech, Web Development and chrome extension that will improve your productivity. Trust me, I won't spam you.

Share on Social Media: