A Pen by Max Hallinan.

Icon.markdown

Icon

Design from Dribbble shot by Beard Chicken.

A Pen by Max Hallinan on CodePen.

License.

index.html

<div class="Absolute-Center">
  <span></span>
</div>

style.css

body {
  background-color: #e2e8e8;
}

* {
  box-sizing: border-box;
}

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

div {
  background-color: #fafeff;
  border-radius: 31px;
  box-shadow: 0 5px 0 0 #e9edee, 0 5px 0 2px #ccd2d2, 0 12px 20px 6px #d5dbdb /*0 7px 18px 0 #ccd2d2*/;
  height: 128px;
  position: relative;
  width: 135px;
}

div:before {
  background-color: #98e8ff;
  border-radius: 50%;
  content: '';
  height: 60px;
  left: 30px;
  position: absolute;
  top: 32px;
  width: 78px;
}

div:after {
  background-color: #98e8ff;
  border-radius: 7px;
  content: '';
  height: 18px;
  position: absolute;
  top: 71px;
  right: 31px;
  transform: skewX(-57deg) rotate(52deg);
  width: 43px;
}

span {
  background-color: #fafeff;
  border-radius: 50%;
  box-shadow: -18px 0px 0 0 #fafeff, 18px 0px 0 0 #fafeff;
  display: block;
  height: 9px;
  left: 65px;
  position: absolute;
  top: 57px;
  width: 9px;
  z-index: 3;
}

span:before {
  background: rgba(253, 130, 233, 0.33);
  border-radius: 50%;
  content: '';
  height: 16px;
  left: 20px;
  position: absolute;
  top: -26px;
  width: 16px;
  z-index: 4;
}