Pure CSS Icons

angle-arrow-down.md

HTML:

  <div class="wrapper">
    <div class="check icon"></div>
  </div>

CSS:

.wrapper {
  width: 50px;
  height: 50px;
  background-color: #555;
  padding: 15px;
  border-radius: 50%;
  cursor: pointer;
}

.check.icon {
  color: #fff;
  margin: auto;
  width: 30px;
  height: 30px;
  border-bottom: solid 1px;
  border-left: solid 1px;
  transform: rotate(-45deg);
}

angle-arrow-up.md

HTML:

  <div class="wrapper">
    <div class="check icon"></div>
  </div>

CSS:

.wrapper {
  width: 50px;
  height: 50px;
  background-color: #555;
  padding: 15px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}

.check.icon {
  color: #fff;
  margin-top: 10px;
  width: 30px;
  height: 30px;
  border-bottom: solid 1px;
  border-left: solid 1px;
  transform: translate(-50%, -50%) rotate(-225deg);
  position: absolute;
  left: 50%;
  top: 50%;
}