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

Problem

Solution

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

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

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

Now we style all the children by Universal Selector (*) and give them 50px height and width.

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

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

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

Codepen

Now the result is as follows:

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.