DEV Community 👩‍💻👨‍💻

Cover image for CSS Icon: Android
Jatin Sharma
Jatin Sharma

Posted on

CSS Icon: Android

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

<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>
Enter fullscreen mode Exit fullscreen mode

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:

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

image.png

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

.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;
}
Enter fullscreen mode Exit fullscreen mode

image.png

Now adding head and eyes:

.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);
}
Enter fullscreen mode Exit fullscreen mode

image.png

Now the last thing we need to add is ears:


.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);
}
Enter fullscreen mode Exit fullscreen mode

After all this, now our final product is ready.

Codepen

Wrapping up

If you have any queries, feel free to drop a comment below. This is a series of CSS Icons so make sure you follow for more such articles. If you like this then don't forget to ❤️ it. And I'll see you in the next one.

Top comments (3)

Collapse
atulcodex profile image
Atul Prajapati

Good start

Collapse
gass profile image
Gass

Nice, it was not an easy one. What happened with the CSS battle series ? are you going to continue writing them ?

Collapse
j471n profile image
Jatin Sharma Author

Yes, I'll continue it. It is getting delayed as ai am currently working on side project. The next part of the CSS battle will be out by Tomorrow.

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.