# CSS Icon: Microsoft

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

## Problem

![logo](https://imgur.com/eFnRBmo.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="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
  <div class="yellow"></div>
</div>
```

The above HTML code has a `wrapper` container and it has four children `red`, `green`, `blue`, and `yellow`.

### CSS

Now let's style them one by one. First, let's style the `wrapper` container.  I've created a two-column `grid` and managed spacing by using [`gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) property.

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
```

Now we style all the children by [Universal Selector (*)](https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors) and give them `50px` height and width.

```css
.wrapper > * {
  width: 50px;
  height: 50px;
}
```

It's time to apply the colors to the individual children.

```css
.red {
  background: #f44336;
}
.green {
  background: #4caf50;
}
.blue {
  background: #2196f3;
}
.yellow {
  background: #ffc107;
}
```

## Codepen
Now the result is as follows: 


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

## Wrapping up
This is going to be 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.