<div class="icon icon--pinterest"></div>
/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
*:after {
  box-sizing: inherit;
body {
	height: 100%;
body {
	background-color: #f5f5f5;
	display: flex;
  align-items: center;
  justify-content: center;
.icon {
	width: 48px;
	height: 48px;
	background-color: #bd081c;
	border-radius: 3px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: contain;
	padding: 8px;
.icon--pinterest {
	background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/pinterest.png');

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.