CSS - Home icon

Code example for drawing a home icon shape using HTML and CSS.

This HTML code sets the class name "home-icon" for the <div> tag which will be the home icon element.

<div class="home-icon"></div>

Creates the roof part on the base element and the wall with the ::before pseudo element.

Sets the "--w" CSS custom property for the reference width value for the shapes.
Uses "--w" to calculate all values needed for the home icon shape, making size changes easy.

Also sets different colors on parts to visualize the individual shape pieces.

/* Home Icon */
.home-icon {
	--w: 300px; /* Base Size */
	position: relative;
	width: var(--w);
	height: var(--w);
}

/* Top part */
.home-icon::before {
	content: "";
	position: absolute;
	top:10%;
	border-bottom: calc(var(--w) / 2.5) solid orange;
	border-right: calc(var(--w) / 2) solid transparent;
	border-left: calc(var(--w) / 2) solid transparent;
	box-sizing: border-box;
}

/* Bottom part */
.home-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%);
	width: 70%;
	height: 40%;
	background-color: #4169e1;
	box-sizing: border-box;
}