Create an X (Close icon) – CSS Solution

Creating a Close icon, or creating an X, is trickier than you’d think. This post will show you how to create an X from scratch using only CSS. This way, you can use it for any project you have, irrespective of icon libraries, images, etc.

The icon we are going to recreate is the one you see on Google Chrome:

This icon is really useful and looks great! But sometimes you need it in a different size or color. With this CSS build, you can edit the icon to your liking (most of the attributes here are just giving the icon some spacing so it sits on the page):

.close-icon {
  position: sticky;
  right: 32px;
  top: 32px;
  width: 32px;
  height: 32px;
  margin-top: 10px;
}
.close-icon:before, .close-icon:after {
  position: absolute;
  left: 20px;
  content: ' ';
  height: 25px;
  width: 2px;
  background-color: black;
}
.close-icon:before {
  transform: rotate(45deg);
}
.close-icon:after {
  transform: rotate(-45deg);
}

You can see this in action here. With this CSS solution, you can edit anythig you want about the icon!

Say you want it to be larger. Adjust the ‘height’ of the before and after attributes:

The above icon is with ‘height’ set to 100px;

If you want a thicker icon, adjust the ‘width’ of the before and after attributes:

The above icon is made with ‘width’ set to 5px.

You can also adjust the color of the icon by changing the ‘background-color’ of the before and after attributes:

You can even change the rotation angles, so you can skew your X a bit if you change the angle of the transforms:

Explore the other CSS properties and see what you can do with your icon. Creating an X icon this way really let’s you adjust whatever you need for the visual style you are trying to create.