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

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.

Comments

[Ritam Chakraborty]

How about designing the Windows 10 Logo?

[Jatin Sharma]

That's great, just add colors 🎨 It will look more realistic.

[Ritam Chakraborty]

I was just trying to mimic the windows 10 logo. It has a single color so went on that direction

[Gass]

Nice. I like your solution. The only thing though, I would liked it more if you explained this grid-template-columns: repeat(2, 1fr);

[Jatin Sharma]

I have used grid to layout the childrens. grid-template-columns: repeat(2, 1fr) property defines that there should be two columns with 1fr. Here fr represents a fraction of the available space in the grid container. And repeat refers to the repeated fraction (how many times you want to repeat the values). repeat() take two arguments

• repeat count
• tracks (value or width of children)

For more info you can visit the following links-

• repeat()
• Learn Grid

[Gass]

Thanks! This is a very good explanation. I think it would be a good idea to add it to the article.