Fundamenty Ikony
Fundamenty
Ikony
Bez biblioteki i bez fontu ikon – każda ikona to inline SVG. Styl: linie, stroke 1,5–1,8, zaokrąglone końce, currentColor. Dziedziczą kolor po rodzicu i skalują się z viewBox, więc animacje (np. obrót plusa) są darmowe.
Zestaw
Pełen inwentarz ikon w serwisie. Wszystkie rysowane w jednym, spójnym duchu.
arrow-right Karty, linki „dalej"
arrow-left Karuzela – wstecz
arrow-right-lg Karuzela – dalej
chevron Separator okruszków
plus Akordeon (obrót do ×)
close Zamknij panel / menu
menu Menu mobilne
copy Kopiowanie kodu
quote Cudzysłów w opiniach
Konwencja
Ikona to inline SVG z aria-hidden (znaczenie niesie tekst obok). Kolor i grubość kontroluje currentColor + stroke-width.
html
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
<path d="M3 10h13m-5-5 5 5-5 5"
stroke="currentColor" stroke-width="1.8"
stroke-linecap="round" stroke-linejoin="round" />
</svg>Rozmiar zadajemy atrybutami width/height lub klasą (h-5 w-5). Ikony interaktywne (np. plus → ×) animujemy transition-transform … group-open:rotate-45.
Rozmiary
Najczęstsze stopnie. Strzałki w kartach 20 px, ikony sterujące karuzeli 22 px w kole 56 px.
16px
20px
24px
32px