.bikeicon {
    display: block;
    overflow: hidden;
    width: 22px;
    height: 22px;
    overflow: hidden;
    color: #666;
}
.bikeicon span.material-symbols-outlined {
    margin-right: 0px;
}

span.surface {
    position: absolute;
    display: block;
    z-index: 4;
}
span.bike {
    display: block;
    text-align: center;
    margin-top: 1px;
    font-size: 20px;
    width: 22px;
    height: 20px;
}

.road span.bike {
    margin-left: 0.5px;
    font-size: 19px;
}
.gravel span.surface {
    transform: rotate(225deg);
    bottom: -6px;
    font-size: 17px;
    left: 2px;
}
.gravel span.bike {
    font-size: 18px;
}
.mtb span.surface {
    transform: rotate(205deg);
    bottom: -4px;
    font-size: 15px;
    left: 5px;
}
.mtb span.bike {
    font-size: 17px;
    transform: rotate(339deg);
    left: -1px;
}