CSS Icon: Microsoft

Jatin Sharma

Jatin SharmaJune 26, 2022

2 min read238 words

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

Problem

logo

Solution

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

HTML

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

styles.css

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

styles.css

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

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

styles.css

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.wrapper > * {
  width: 50px;
  height: 50px;
}
.red {
  background: #f44336;
}
.green {
  background: #4caf50;
}
.blue {
  background: #2196f3;
}
.yellow {
  background: #ffc107;
}

Codepen

Now the result is as follows:

Jatin's Newsletter

Get notified in your inbox whenever I write a new blog post.

Share on Social Media: