SCSS: chevrons for up, down, left, right... for whatever size and width you want

chevron.scss

@mixin chevron-rules($chevron-size, $chevron-width) {
    width: $chevron-size;
    height: $chevron-size;
    border-top-width: $chevron-width;
    border-right-width: $chevron-width;
}

@mixin chevron-variant($chevron-size, $chevron-width, $variant:false) {
    @if $variant {
        &.#{$variant} {
            @include chevron-rules($chevron-size, $chevron-width);
        }
    } @else {
        @include chevron-rules($chevron-size, $chevron-width);
    }
}

.chevron {
    display: block;
    background: transparent;
    border-style: solid;
    border-color: black;
    border-width: 0;
    @include chevron-variant(10px, 1px); // default
    @include chevron-variant(20px, 1px, 'range-slider');
    @include chevron-variant(30px, 1px, 'product-nav');
    &.up {
        transform: translateY(25%) rotate(-45deg);
    }
    &.right {
        transform: rotate(45deg);
    }
    &.down {
        transform: translateY(-25%) rotate(135deg);
    }
    &.left {
        transform: rotate(-135deg);
    }
}