System ikon
System ikon to spójny zestaw grafik wektorowych używanych w całym interfejsie. Dobre ikony wspierają nawigację, komunikują akcje i wzmacniają tożsamość marki.
Co to jest?
System ikon w Design Systemie to uporządkowany zbiór grafik wektorowych (SVG) o spójnym stylu, rozmiarach i zasadach użycia. Obejmuje grid ikony (np. 24x24px), styl kreski (line, filled, duotone), grądzil kreski (1.5px, 2px), zaokrąglenia i padding wewnętrzny. System powinien zawierać co najmniej 200–500 ikon pokrywających typowe scenariusze UI.
Jak to działa?
Każda ikona jest rysowana na gridzie (zwykle 24x24px) z określonymi zasadami: safe zone (2px padding), stała grubość kreski, spójne zaokrąglenia rogów. Ikony są eksportowane jako SVG i dostępne jako komponenty React/Vue lub sprite. Rozmiary ikon (16, 20, 24, 32px) odpowiadają kontekstom użycia: 16px w tekstach, 24px w nawigacji, 32px w hero sekcjach.
Jak wdrożyć?
Przykłady z prawdziwych Design Systemów
Apple SF Symbols oferuje ponad 5000 ikon z 9 wagami i 3 skalami, zintegrowanych z systemem typografii. GitHub Octicons to spójny zestaw ikon w 2 rozmiarach (16 i 24px). Shopify Polaris Icons to dedykowany zestaw ikon e-commerce z wytycznymi użycia.