.Icon { position: relative; }

.Icon.BlueWhite { width: 14px; margin-top: 5px; }
.Icon.BlueWhite::before { content: ""; width: 14px; height: 14px; border-radius: 14px; background-color: #0369B1; display: block; }
.Icon.BlueWhite::after { content: ""; width: 0; height: 0; position: absolute; display: block; color: #FFFFFF; font-size: 10px; }
.Icon.BlueWhite.Arrow::after { top: 4px; left: 4px; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 8px solid #FFFFFF; }
.Icon.BlueWhite.One::after { content: "1"; top: 0px; left: 4px; }
.Icon.BlueWhite.Two::after { content: "2"; top: 0px; left: 4px; }
.Icon.BlueWhite.Three::after { content: "3"; top: 0px; left: 4px; }

.Icon.DownTriangle::after { content: ""; width: 0; height: 0; display: block; position: relative; top: -2px; left: 0; }
.Icon.DownTriangle.White::after { border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #FFFFFF; }