<i class="icono-arrow1-left"></i>
<i class="icono-arrow1-right"></i>
<i class="icono-arrow1-up"></i>
<i class="icono-arrow1-down"></i>
<br>
<i class="icono-arrow1-left-up"></i>
<i class="icono-arrow1-left-down"></i>
<i class="icono-arrow1-right-up"></i>
<i class="icono-arrow1-right-down"></i>
<br><br><br><br>
<i class="icono-arrow2-left"></i>
<i class="icono-arrow2-right"></i>
<i class="icono-arrow2-up"></i>
<i class="icono-arrow2-down"></i>
<br>
<i class="icono-arrow2-left-up"></i>
<i class="icono-arrow2-left-down"></i>
<i class="icono-arrow2-right-up"></i>
<i class="icono-arrow2-right-down"></i>
<br><br><br><br>
<i class="icono-arrow4-left"></i>
<i class="icono-arrow4-right"></i>
<i class="icono-arrow4-up"></i>
<i class="icono-arrow4-down"></i>
<br>
<i class="icono-arrow4-left-up"></i>
<i class="icono-arrow4-left-down"></i>
<i class="icono-arrow4-right-up"></i>
<i class="icono-arrow4-right-down"></i>
<br>
Part of
<a href="https://saeedalipoor.github.io/icono">ICONO</a>

body{
  text-align: center;
  background: #222;
  margin: 20px;
}
*{
  color: #888 !important;
  &:hover{
    color: #aaa !important;
  }
}
[class*="icono"] {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  color: #666;
  box-sizing: border-box;
  &:after, &:before {
    content: "";
    box-sizing: border-box;
  }
}
[class*="icono-arrow1"]{
  width: 20px;
  height: 20px;
  border-width: 4px 4px 0 0;
  border-style: solid;
  margin: 10px;
  &:before{
    right: 0;
    top: -3px;
    position: absolute;
    height: 4px;
    box-shadow: inset 0 0 0 32px;
    transform: rotate(-45deg);
    width: 23px;
    transform-origin: right top;
  }
  &[class*="-left"]{
    transform: rotate(45deg);
    &[class*="-up"]{
      transform: none;
    }
    &[class*="-down"]{
      transform: rotate(90deg);
    }
  }
  &[class*="-right"]{
    transform: rotate(-135deg);
    &[class*="-up"]{
      transform: rotate(-90deg);
    }
    &[class*="-down"]{
      transform: rotate(180deg);
    }
  }
  &[class*="-up"]{
    transform: rotate(-45deg);
  }
  &[class*="-down"]{
    transform: rotate(135deg);
  }
}
[class*="icono-arrow2"]{
  width: 0;
  height: 0;
  border-width: 6px;
  border-style: solid;
  border-bottom-color: transparent;
  border-left-color: transparent;
  margin: 10px;
  &:before{
    right: 0;
    top: -3px;
    position: absolute;
    height: 4px;
    box-shadow: inset 0 0 0 32px;
    transform: rotate(-45deg);
    width: 15px;
    transform-origin: right top;
  }
  &[class*="-left"]{
    transform: rotate(45deg);
    &[class*="-up"]{
      transform: none;
    }
    &[class*="-down"]{
      transform: rotate(90deg);
    }
  }
  &[class*="-right"]{
    transform: rotate(-135deg);
    &[class*="-up"]{
      transform: rotate(-90deg);
    }
    &[class*="-down"]{
      transform: rotate(180deg);
    }
  }
  &[class*="-up"]{
    transform: rotate(-45deg);
  }
  &[class*="-down"]{
    transform: rotate(135deg);
  }
}
[class*="icono"] {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  color: #666;
  box-sizing: border-box;
  &:after, &:before {
    content: "";
    box-sizing: border-box;
  }
}
[class*="icono-arrow3"]{
  width: 18px;
  height: 20px;
  border-width: 4px 4px 0 0;
  border-style: solid;
  margin: 10px;
  border-radius: 0 2px 0 0;
  &:before, &:after{
    border-radius: 2px;
    position: absolute;
  }
  &:before{
    right: 0;
    top: -3px;
    width: 23px;
    height: 4px;
    transform: rotate(-45deg);
    transform-origin: right top;
    box-shadow: inset 0 0 0 32px;
  }
  &:after{
    width: 4px;
    height: 4px;
    left: -2px;
    top: -4px;
    box-shadow: inset 0 0 0 32px, 16px 17px;
  }
  &[class*="-left"]{
    transform: rotate(45deg);
    &[class*="-up"]{
      transform: none;
    }
    &[class*="-down"]{
      transform: rotate(90deg);
    }
  }
  &[class*="-right"]{
    transform: rotate(-135deg);
    &[class*="-up"]{
      transform: rotate(-90deg);
    }
    &[class*="-down"]{
      transform: rotate(180deg);
    }
  }
  &[class*="-up"]{
    transform: rotate(-45deg);
  }
  &[class*="-down"]{
    transform: rotate(135deg);
  }
}

[class*="icono-arrow4"]{
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-top: 7px solid;
  border-right: 7px solid;
  margin: 15px;
  &[class*="-left"]{
    transform: rotate(45deg);
    &[class*="-up"]{
      transform: none;
    }
    &[class*="-down"]{
      transform: rotate(90deg);
    }
  }
  &[class*="-right"]{
    transform: rotate(-135deg);
    &[class*="-up"]{
      transform: rotate(-90deg);
    }
    &[class*="-down"]{
      transform: rotate(180deg);
    }
  }
  &[class*="-up"]{
    transform: rotate(-45deg);
  }
  &[class*="-down"]{
    transform: rotate(135deg);
  }
}