html классы писать с маленькой буквы через - разделять слова
js все переменные начинаются с маленькой буквы слова слитно начиная с большой буквы. Как в html классы

const list = document.querySelectorAll('.CatalogMenu li a')
 list.forEach(item =>{ 
        item.addEventListener('click', (e) =>{
        list.forEach(el=>{ el.classList.remove('active'); });
        item.classList.add('active')
    })
})

Качаешь шрифты откуда угодно,
Конвертируешь в woff woff2
Кидаешь в проекте в папку fonts
И подключаешь их из папки

Это самый оптимальный вариант!

Повесь на псевдоэлементы.
Ну если дивы нельзя, то спаны используй, также 1 спан 1 квадрат и псевдо эл другой квадрат.
linear-gradient не закруглишь углы, или костыляй)

Я такое вырезаю в svg , и вставляю через

background: url("data:image/svg+xml, --- --- --- ") center no-repeat;

Так же можно и несколько

background: url("data:image/svg+xml, --- --- --- ") center no-repeat,
                     url("data:image/svg+xml, --- --- --- ") center no-repeat,
                     url("data:image/svg+xml, --- --- --- ") center no-repeat;

Идешь ты в магазин, в кармане 125р! Подходишь к витрине и видишь конфеты, одни за 100, другие 200 и 300))) Суешь продавцу 125р, и говоришь, дайте мне конфет за 200, у меня же больше 100р )))

Думаю понятно объяснил)))