<div class="icon icon--pinterest"></div>
/* apply a natural box layout model to all elements, but allowing components to change */
html,
body {
	height: 100%;
}
body {
	background-color: #f5f5f5;
	display: flex;
  align-items: center;
  justify-content: center;
}
.icon {
	position: relative;
	margin: 0 auto;
	width: 48px;
	height: 48px;
	background-color: #bd081c;
	border-radius: 3px;
	background-repeat: no-repeat;
/* 	background-position: 50% 50%; */
	background-size: contain;
	padding: 8px;
	border: 8px solid #bd081c;
}
.icon--pinterest {
	box-sizing: border-box;
	background-clip: padding-box;
	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.