CSS Icon: Microsoft – DEV Community

On this article, I’ll create a Microsoft icon by utilizing CSS solely. Let us take a look at how we try this.



First, we have to create the construction for this brand then we are going to model that construction.


<div class="wrapper">
  <div class="pink"></div>
  <div class="inexperienced"></div>
  <div class="blue"></div>
  <div class="yellow"></div>
Enter fullscreen mode

Exit fullscreen mode

The above HTML code has a wrapper container and it has 4 youngsters pink, inexperienced, blue, and yellow.


Now let’s model them one after the other. First, let’s model the wrapper container. I’ve created a two-column grid and managed spacing by utilizing gap property.

.wrapper {
  show: grid;
  grid-template-columns: repeat(2, 1fr);
  hole: 10px;
Enter fullscreen mode

Exit fullscreen mode

Now we model all the youngsters by Universal Selector (*) and provides them 50px top and width.

.wrapper > * {
  width: 50px;
  top: 50px;
Enter fullscreen mode

Exit fullscreen mode

It is time to apply the colours to the person youngsters.

.pink {
  background: #f44336;
.inexperienced {
  background: #4caf50;
.blue {
  background: #2196f3;
.yellow {
  background: #ffc107;
Enter fullscreen mode

Exit fullscreen mode


Now the result’s as follows:

Wrapping up

That is going to be a sequence of CSS Icons so be sure you comply with for extra such articles. When you like this then remember to ❤️ it. And I am going to see you within the subsequent one.

Add a Comment

Your email address will not be published. Required fields are marked *