# 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](https://imgur.com/ppa6xAS.png)

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

### HTML

```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`:

```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](https://cdn.hashnode.com/res/hashnode/image/upload/v1658159646613/BWdAvk5vv.png align="left")


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

```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](https://cdn.hashnode.com/res/hashnode/image/upload/v1658159728633/2NfKz7q60.png align="left")

Now adding `head` and `eyes`:

```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](https://cdn.hashnode.com/res/hashnode/image/upload/v1658159902853/58iiNO7_8.png align="left")


Now the last thing we need to add is ears:


```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 

%[https://codepen.io/j471n/pen/qBoWrNa] 

## 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.