Darmowe wektorowe awatary i ikony UI: SVG, licencje i jakość | WPPoland

Mariusz Szatkowski

Darmowe wektorowe awatary i ikony UI 2026: przewodnik

Ostatnio zweryfikowano: 12 października 2026

24 min czytania

Przewodnik

UI/UX designer

500+ projektów WP

Gdy ten artykuł powstawał po raz pierwszy w 2008 roku, krajobraz cyfrowego designu wyglądał zupełnie inaczej niż dzisiaj. Smashing Magazine opublikował wtedy kolekcję „Vector Girl Avatars”, pulchne postacie rozprowadzane w formatach PSD i AI, które oddawały estetykę ery Web 2.0. W tamtych czasach gradienty, cienie i rozbudowane ilustracje definiowały trendy projektowe, a każdy webmaster znał rutynę pobierania paczek ZIP z ikonami i ręcznego przycinania ich w Photoshopie do publikacji w sieci.

Z perspektywy 2026 roku tamta kolekcja to kawałek historii designu. Potrzeba posiadania dobrych, bezpłatnych zasobów graficznych nie zmalała, zmieniły się za to technologie. Skalowalne wektory (SVG) zastąpiły formaty rastrowe, statyczne obrazki uzupełniły animacje Lottie, a nowoczesne interfejsy wymagają przemyślanego podejścia do licencji, dostępności i bezpieczeństwa zasobów wizualnych.

Ten przewodnik opisuje ewolucję zasobów wektorowych, przegląda bezpłatne biblioteki dostępne w 2026 roku razem z ich licencjami oraz pokazuje, jak wdrażać grafikę wektorową w projektach webowych i witrynach WordPress.

#1. Jak ikony cyfrowe przeszły od pixel art do SVG

#1.1 Jakie ograniczenia miały ikony bitmapowe

Historia cyfrowych ikon jest związana z ograniczeniami technologicznymi każdej epoki. We wczesnych dniach internetu projektanci pracowali głównie z grafiką bitmapową, czyli obrazami złożonymi z ustalonych pikseli, które traciły na jakości przy skalowaniu poza oryginalne wymiary. To ograniczenie zmuszało twórców do przygotowywania wielu wersji każdej ikony w różnych rozmiarach.

Projektowanie ikon w latach 90. i na początku lat 2000. koncentrowało się na precyzji na poziomie pikseli. Projektanci rysowali ikony w małych rozmiarach (16x16, 24x24, 32x32 pikseli), gdzie każdy piksel niósł wizualny ciężar. Estetyka „pixel art” wyłoniła się nie jako wybór artystyczny, ale jako praktyczna konieczność, gdy projektanci ręcznie wygładzali krawędzie, aby uzyskać czytelne obrazy przy ograniczonych rozdzielczościach.

Przezroczystość alfa w formacie PNG była dużym postępem, bo pozwoliła ikonom łączyć się z różnymi tłami bez poszarpanych krawędzi, typowych dla jednobitowej przezroczystości GIF. Podstawowe ograniczenie pozostało: skalowanie ikony poza zaprojektowane wymiary dawało widoczną pikselację, a ekranów o różnej gęstości pikseli przybywało.

#1.2 Dlaczego SVG stał się standardem ikon

Skalowalna grafika wektorowa (SVG) rozwiązała problem bitmap, bo opisuje obraz niezależnie od rozdzielczości. Bitmapa definiuje obraz jako siatkę pokolorowanych pikseli, SVG opisuje kształty, linie, krzywe, wypełnienia i obrysy matematycznie, więc renderują się one ostro w każdej skali.

SVG 1.1 jest rekomendacją W3C, a jego następca, SVG 2, wciąż ma status Candidate Recommendation: najnowszy snapshot tej specyfikacji W3C opublikowało 6 października 2026 roku. Adopcję SVG w praktyce napędziły natywna obsługa w przeglądarkach i możliwość osadzania znacznika <svg> bezpośrednio w HTML5. Responsywny web design, rozwijany od około 2010 roku, dodatkowo przyspieszył zmianę, bo projektanci szukali grafik, które wyglądają ostro na ekranach o dowolnej wielkości i gęstości pikseli.

SVG ma trzy techniczne zalety, które wyjaśniają jego pozycję w projektowaniu ikon. Po pierwsze, skalowalność: ta sama ikona renderuje się poprawnie na zegarku i na monitorze 5K. Po drugie, mały rozmiar: ikona lupy z zestawu Heroicons (24/outline/magnifying-glass.svg w repozytorium projektu) ma 296 bajtów, a ikona search.svg z Lucide 275 bajtów (pomiar z 12 października 2026). Po trzecie, sterowanie z poziomu kodu: CSS i JavaScript mogą zmieniać dowolny element grafiki wektorowej, co pozwala budować efekty najechania, animacje i stylizację zależną od stanu aplikacji.

#1.3 Czym są animacje Lottie

Kolejnym krokiem po statycznym SVG była animowana grafika wektorowa. Lottie to biblioteka Airbnb, która według dokumentacji projektu lottie-web odczytuje animacje z Adobe After Effects wyeksportowane do JSON wtyczką Bodymovin i renderuje je natywnie w aplikacjach webowych i mobilnych.

Pliki Lottie to reprezentacje JSON animacji eksportowanych z After Effects. Zawierają informacje potrzebne do renderowania: ścieżki, wypełnienia, transformacje i dane klatek kluczowych. Biblioteka obsługuje odtwarzanie, zapętlanie, przewijanie do wybranej klatki i zmianę właściwości z poziomu kodu.

Dla projektowania interfejsów oznacza to, że animacje ładowania, potwierdzenia sukcesu, sekwencje onboardingu i mikrointerakcje mogą być wektorowe i sterowane kodem zamiast osadzane jako GIF albo wideo.

#2. Dlaczego grafiki wektorowe są nadal niezbędne w UI

#2.1 Grafika wektorowa w responsywnym designie

Responsywny web design zmienił wymagania wobec grafik interfejsu. Gdy witryny zaczęły obsługiwać smartfony, tablety, laptopy i duże monitory, ograniczenia bitmap stały się coraz bardziej uciążliwe. Pojedyncza ikona może być wyświetlana w rozmiarze 16 pikseli w jednym miejscu i 64 pikseli w innym.

Grafika wektorowa rozwiązuje ten problem. Ikona SVG definiuje wygląd przez opis matematyczny, a nie siatkę pikseli, więc renderuje się w dowolnym rozmiarze bez utraty jakości. Jeden plik źródłowy zastępuje zestaw wersji w różnych rozdzielczościach, co zmniejsza zarówno pracę zespołu, jak i liczbę plików do pobrania.

SVG jest formatem tekstowym (XML), dlatego serwer może go kompresować w transmisji tak samo jak HTML i CSS, a przeglądarka renderuje go bez dodatkowych wtyczek.

#2.2 Jak ikony SVG poprawiają dostępność

SVG obsługuje znaczniki, które technologie asystujące potrafią odczytać. Elementy <title> i <desc> dostarczają tekstowej alternatywy, a atrybuty ARIA pozwalają oznaczyć ikonę jako znaczącą albo dekoracyjną. Szczegóły i przykłady kodu są w sekcji 6.3.

Grafika wektorowa lepiej współpracuje też z powiększeniem strony i trybami wysokiego kontrastu. Gdy użytkownik powiększa tekst, ikona SVG skaluje się bez artefaktów, które pojawiają się przy powiększaniu bitmap poza ich natywną rozdzielczość.

Właściwości SVG można zmieniać w CSS, więc ikona może reagować na preferencje użytkownika, na przykład na zapytania mediów prefers-color-scheme i prefers-contrast, zmieniając kolor lub grubość obrysu.

#2.3 Ikony SVG w systemie projektowym

Aplikacje firmowe i rozbudowane witryny potrzebują wielu ikon: akcji, wskaźników stanu, elementów nawigacji i pojęć. Utrzymanie spójności wizualnej w setkach ikon to wyzwanie, które podejście wektorowe pomaga rozwiązać systemowo.

Systemy projektowe traktują ikony wektorowe jako komponenty podstawowe. Gdy podstawowe kształty, grubość obrysów, promienie narożników i korekty optyczne są parametrami całego systemu, nowe ikony zachowują spójność z istniejącymi. Ogranicza to drobne niespójności, które pojawiają się, gdy każdy projektant rysuje ikony po swojemu.

Ikony SVG dobrze współpracują z tokenami projektowymi: kolor, rozmiar i grubość obrysu ikony mogą być zarządzane razem z kolorami, odstępami i typografią. Zmiana scentralizowanej definicji tokenu zmienia wygląd ikon w całej aplikacji.

#3. Gdzie szukać darmowych wektorowych awatarów i ikon w 2026

#3.1 Generatory awatarów SVG: DiceBear, Humaaans i inne

Zamiast wybierać awatary ze skończonej biblioteki, programiści mogą generować je programowo na podstawie identyfikatora użytkownika, nazwy lub innego atrybutu.

DiceBear generuje awatary SVG na podstawie ciągu wejściowego (seed), więc ten sam użytkownik zawsze dostaje ten sam awatar. Najprostsza integracja to adres URL z identyfikatorem jako parametrem:

<img src="https://api.dicebear.com/10.x/lorelei/svg?seed=mariusz" alt="" width="64" height="64" />

Według dokumentacji HTTP API DiceBear aktualna wersja API to 10.x (wersje 5.x do 8.x są wycofane), limit wynosi 50 żądań na sekundę dla SVG, a publiczne API jest bezpłatne do zastosowań niekomercyjnych. Do użytku komercyjnego lub przy wyższych limitach dokumentacja zaleca postawienie własnej instancji. Kod DiceBear jest na licencji MIT, ale każdy styl awatara ma własną licencję, opisaną na stronie licencji DiceBear: Lorelei to CC0 1.0, Fun Emoji to CC BY 4.0 (wymaga uznania autorstwa), a Avataaars i Bottts mają własne warunki autorów, pozwalające na użytek osobisty i komercyjny.

Humaaans autorstwa Pablo Stanleya to modułowy system ilustracji: projektant łączy głowy, tułowia, nogi i tła w sceny i postacie. Strona projektu podaje licencję CC0, pozwalającą na użytek komercyjny i osobisty, oraz odsyła do wersji dla Sketcha, przykładu w InVision Studio i kolekcji w serwisie Blush.

Modułowe podejście przydaje się aplikacjom, które potrzebują wielu różnych awatarów. Zamiast wybierać z gotowych kombinacji, można programowo generować warianty z różnych komponentów i dopasować je do estetyki marki.

Inne generatory, które warto znać:

Boring Avatars: biblioteka React (MIT) od organizacji boringdesigners z sześcioma wariantami (marble, beam, pixel, sunset, ring, bauhaus); awatar powstaje z właściwości name, którą może być nazwa użytkownika lub e-mail.
Multiavatar: generator, którego autorzy podają na stronie projektu 12 230 590 464 możliwych awatarów; pełne warunki licencji są na osobnej stronie projektu.
Bean Heads (dawniej Big Heads): komponent React Roberta Broersmy na licencji MIT do składania postaci z właściwości takich jak włosy, oczy i kolor skóry.

#3.2 Darmowe biblioteki ilustracji wektorowych

Biblioteki ilustracji dostarczają grafiki zaprojektowane do wspólnego użycia, ze spójnym stylem, paletą i językiem wizualnym.

unDraw autorstwa Kateriny Limpitsouni to zbiór ilustracji w płaskim stylu, obejmujący tematy od biznesu po codzienne czynności. Na stronie projektu kolor akcentu ustawia się przed pobraniem, więc ilustracja od razu pasuje do palety marki. unDraw ma własną licencję, opublikowaną na stronie projektu, i przed użyciem w projekcie klienta warto ją przeczytać.

W praktyce wystarczy wybrać ilustrację, ustawić kolor akcentu, pobrać SVG i osadzić go w szablonie. Kod SVG można też dalej stylować przez właściwości CSS lub atrybuty inline.

#3.3 Darmowe biblioteki ikon SVG

Rynek bibliotek ikon w 2026 roku obejmuje zarówno klasyczne zestawy, jak i systemy z wieloma wariantami.

Phosphor Icons to rodzina ikon w sześciu wagach: Thin, Light, Regular, Bold, Fill i Duotone, na licencji MIT. Każda ikona istnieje we wszystkich wariantach, więc zestawy łączą się bez zgrzytów. Phosphor ma implementacje dla React, Vue, Figmy i komponentów webowych.

Heroicons od twórców Tailwind CSS (Tailwind Labs) występuje w czterech wariantach: 24x24 outline, 24x24 solid, 20x20 solid i 16x16 solid. Pakiety @heroicons/react i @heroicons/vue udostępniają ikony jako komponenty, a repozytorium projektu podaje licencję MIT. Heroicons pasuje do projektów opartych na Tailwind, ale działa w każdym projekcie.

Feather Icons stawia na prostotę: każda ikona jest zaprojektowana na siatce 24x24, a domyślna grubość obrysu to 2. Projekt jest na licencji MIT.

Lucide to fork Feather Icons rozwijany przez społeczność, z ponad 1600 ikonami według repozytorium projektu, na licencji ISC. Lucide ma oficjalne pakiety dla React, Vue, Svelte, Angulara, Astro i innych środowisk.

Tabler Icons według README projektu obejmuje 6238 ikon (5184 konturowe i 1054 wypełnione, stan na październik 2026), na siatce 24x24 z obrysem 2 px, na licencji MIT. Ikony konturowe można rozjaśnić lub pogrubić zmianą stroke-width.

Material Symbols od Google to zmienny font ikon z czterema osiami: wypełnienie (0 do 100), grubość (100 do 700), grade (od -50 do 200) i rozmiar optyczny (20 do 48 px). Według repozytorium Google ikony są udostępnione na licencji Apache 2.0.

.material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

#3.4 Licencje darmowych zestawów ikon w porównaniu

„Darmowe” nie znaczy „bez warunków”. Różnice między licencjami dotyczą głównie uznania autorstwa i tego, co trzeba dołączyć do kopii plików.

Zestaw	Licencja	Co wymaga
Font Awesome Free	ikony CC BY 4.0, fonty SIL OFL 1.1, kod MIT	uznanie autorstwa; pobrane pliki mają je już w komentarzach
Material Symbols	Apache 2.0	zachowanie informacji o licencji przy redystrybucji
Heroicons	MIT	dołączenie informacji o prawach autorskich i licencji do kopii
Lucide	ISC (ikony pochodzące z Feather: MIT)	informacja o prawach autorskich i licencji w kopiach
Phosphor, Tabler, Feather	MIT	informacja o prawach autorskich i licencji w kopiach
Humaaans	CC0	brak wymagań
DiceBear	kod MIT, style według własnych licencji	zależnie od stylu, np. Fun Emoji CC BY 4.0

Font Awesome w pliku licencji wersji Free rozdziela trzy licencje: CC BY 4.0 dla ikon, SIL OFL 1.1 dla ikon spakowanych jako fonty webowe i desktopowe oraz MIT dla pozostałych plików. Ten sam plik prosi, aby nie usuwać komentarzy z uznaniem autorstwa, które już są w pobranych plikach.

Licencje MIT i ISC wymagają, aby informacja o prawach autorskich i treść licencji były dołączone do kopii oprogramowania. Strona licencji Lucide nie wspomina o widocznym podpisie na stronie, a obowiązek dotyczy informacji w dystrybuowanych plikach. Apache 2.0 zawiera dodatkowo wyraźną licencję patentową.

Poza bibliotekami ogólnego przeznaczenia istnieją zestawy wyspecjalizowane.

Ikony mediów społecznościowych zawierają loga głównych platform w formacie wektorowym. Przydają się w przyciskach udostępniania, sekcjach kontaktowych i stopkach. Logo platformy pozostaje znakiem towarowym jej właściciela, więc warto sprawdzić wytyczne marki danej platformy.

Ikony flag to flagi państw i regionów w formacie wektorowym, przydatne w przełącznikach języka, kalkulatorach wysyłki i wyborze kraju. Zestawy nazywają pliki zwykle kodami krajów ISO 3166-1, co ułatwia mapowanie.

Ikony metod płatności zawierają loga kart płatniczych, portfeli cyfrowych i lokalnych metod płatności, używane w koszykach sklepów internetowych.

#4. Jak zintegrować SVG z WordPress profesjonalnie

#4.1 Dlaczego WordPress blokuje SVG domyślnie

WordPress nie ma SVG na liście domyślnie dozwolonych typów plików. Powód jest techniczny: obraz PNG to dane pikseli, a SVG to dokument XML, który może zawierać JavaScript, odwołania do zewnętrznych zasobów i inne konstrukcje wykonywane przez przeglądarkę. Plik SVG otwarty bezpośrednio w przeglądarce może uruchomić skrypt w kontekście domeny witryny.

To ryzyko ataków typu cross-site scripting (XSS). Skrypt wykonany w kontekście witryny może odczytać dane sesji albo wykonać akcje w imieniu zalogowanego administratora.

Ograniczenie da się obejść bezpiecznie, jeśli każdy przesyłany plik przechodzi przez sanityzację, a prawo przesyłania SVG mają tylko zaufani użytkownicy.

#4.2 Jak bezpiecznie włączyć SVG w WordPressie

Wtyczka Safe SVG to najprostsza droga. Według strony wtyczki w katalogu WordPress.org jej autorem jest 10up, ma ponad milion aktywnych instalacji, a sanityzację wykonuje biblioteka svg-sanitizer Daryll Doyle’a (enshrined/svg-sanitize). Wtyczka usuwa niebezpieczny kod przy przesyłaniu, pokazuje podglądy SVG w bibliotece mediów, pozwala ograniczyć przesyłanie SVG do wybranych użytkowników i opcjonalnie optymalizuje pliki przez SVGO (domyślnie wyłączone).

Instalacja jest prosta: zainstaluj i aktywuj wtyczkę z katalogu WordPress, w razie potrzeby ogranicz, kto może przesyłać SVG, i przesyłaj pliki przez bibliotekę mediów. Sanityzacja działa automatycznie przy każdym przesłaniu.

Wtyczka SVG Support autorstwa Benbodhi (strona w katalogu) również sanityzuje przesyłane pliki i ma tryb zaawansowany: klasa style-svg dodana do bloku obrazu renderuje SVG inline, więc można go stylować w CSS.

Ręczna sanityzacja daje pełną kontrolę programistom. Poniższy przykład pokazuje zasadę działania, ale wyrażenia regularne nie są pełnym parserem XML, dlatego w produkcji lepiej użyć biblioteki enshrined/svg-sanitize, tej samej, której używa Safe SVG:

<?php
/**
 * Uproszczony przykład sanityzacji SVG.
 * W produkcji użyj biblioteki enshrined/svg-sanitize.
 */
function wppoland_sanitize_svg($svg_content) {
    // Usuń znaczniki skryptów
    $svg_content = preg_replace('/<script[^>]*?>.*?<\/script>/is', '', $svg_content);

    // Usuń procedury obsługi zdarzeń
    $svg_content = preg_replace('/\s*on\w+\s*=\s*["\'][^"\']*["\']/is', '', $svg_content);
    $svg_content = preg_replace('/\s*on\w+\s*=\s*[^\s>]+/is', '', $svg_content);

    // Usuń adresy javascript:
    $svg_content = preg_replace('/href\s*=\s*["\']?\s*javascript:[^"\']*["\']?/is', 'href="#"', $svg_content);

    return $svg_content;
}

#4.3 Jak wstawić inline SVG w motywie WordPress

Inline SVG, czyli kod SVG osadzony bezpośrednio w HTML zamiast odwołania do pliku, daje możliwości stylizacji niedostępne dla plików zewnętrznych. Każdy element grafiki jest dostępny dla CSS i JavaScript, co pozwala na efekty najechania, dynamiczne zmiany kolorów i animacje.

Podstawowa integracja inline SVG:

<?php
function wppoland_render_icon($icon_name, $classes = '') {
    $svg_path = get_template_directory() . '/assets/icons/' . sanitize_file_name($icon_name) . '.svg';

    if (file_exists($svg_path)) {
        $svg_content = file_get_contents($svg_path);

        // Usuń atrybuty width/height, aby ikona skalowała się z CSS
        $svg_content = preg_replace('/(width|height)=["\'][^"\']*["\']/', '', $svg_content);

        // Dodaj viewBox, jeśli brakuje
        if (strpos($svg_content, 'viewBox') === false) {
            $svg_content = preg_replace('/<svg/', '<svg viewBox="0 0 24 24"', $svg_content, 1);
        }

        // Dodaj własne klasy
        if (!empty($classes)) {
            $svg_content = preg_replace('/<svg/', '<svg class="' . esc_attr($classes) . '"', $svg_content, 1);
        }

        return $svg_content;
    }

    return '';
}

Stylizacja CSS dla inline SVG:

.icon {
    width: 24px;
    height: 24px;
    transition: fill 0.3s ease, stroke 0.3s ease;
}

.icon:hover {
    fill: #ff6b6b;
    stroke: #333;
}

/* Przykład animowanej ikony */
@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.icon.animated:hover {
    animation: iconPulse 0.5s ease-in-out;
}

#4.4 Jak zoptymalizować pliki SVG

Optymalizacja plików SVG ma znaczenie szczególnie na stronach z wieloma ikonami.

SVGO to według dokumentacji projektu biblioteka Node.js i narzędzie wiersza poleceń do optymalizacji SVG. Usuwa metadane edytorów, komentarze, ukryte elementy oraz domyślne lub nieoptymalne wartości, jeśli można to zrobić bez zmiany wyglądu. Najlepiej uruchamiać je w procesie budowania motywu.

Sprite z elementami <symbol> łączy wiele ikon w jednym bloku SVG, a każdą ikonę wywołuje się przez <use>. Kod ścieżki trafia na stronę raz, nawet gdy ikona występuje wielokrotnie:

<?php
function wppoland_icon_sprite() {
    ?>
    <svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
        <symbol id="icon-search" viewBox="0 0 24 24">
            <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke="currentColor" stroke-width="2" fill="none"/>
        </symbol>
        <symbol id="icon-menu" viewBox="0 0 24 24">
            <path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" stroke-width="2" fill="none"/>
        </symbol>
        <!-- Kolejne ikony -->
    </svg>
    <?php
}
add_action('wp_body_open', 'wppoland_icon_sprite');

Ikona ze sprite’a: <svg class="icon" aria-hidden="true"><use href="#icon-search"></use></svg>.

Leniwe ładowanie dotyczy plików SVG wstawianych przez <img>: atrybut loading="lazy" działa dla nich tak samo jak dla innych obrazów. Inline SVG jest częścią HTML, więc nie ma czego ładować leniwie.

#5. Jak animować ikony SVG i grafikę interaktywną

#5.1 Jak animować SVG w CSS

Animacje CSS zastosowane do elementów SVG nie wymagają JavaScriptu. Dwa typowe wzorce interfejsu to obracający się wskaźnik ładowania i podskakująca ikona powiadomienia:

@keyframes iconSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.icon.loading {
    animation: iconSpin 1s linear infinite;
}

@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.icon.notification {
    animation: iconBounce 0.6s ease-in-out 2;
}

Te reguły działają z inline SVG i mogą reagować na najechanie, stan aplikacji lub klasy dodawane przez skrypt.

#5.2 Jak dodać animację Lottie na stronę

Animacje Lottie osadza się przez odtwarzacz, który zajmuje się renderowaniem i sterowaniem odtwarzaniem.

Podstawowa implementacja Lottie:

<!-- Odtwarzacz Lottie w przypiętej wersji (npm: @lottiefiles/lottie-player) -->
<script src="https://unpkg.com/@lottiefiles/[email protected]/dist/lottie-player.js"></script>

<!-- Animacja z własnego serwera -->
<lottie-player
    src="/animations/loading.json"
    background="transparent"
    speed="1"
    style="width: 200px; height: 200px;"
    loop
    autoplay
></lottie-player>

Wersja odtwarzacza jest przypięta, bo @latest może po aktualizacji pakietu zmienić zachowanie strony bez żadnej zmiany w kodzie. Plik JSON animacji najlepiej trzymać na własnym serwerze.

Animacje Lottie można osadzać w WordPressie przez shortcode lub bloki Gutenberg, a w katalogu wtyczek są rozwiązania dodające blok Lottie z kontrolą odtwarzania.

#5.3 Jak animacje SVG wpływają na wydajność

Animowana grafika wymaga uwagi, żeby nie spowalniać strony.

Ogranicz zakres animacji do istotnych elementów zamiast całej grafiki. Animuj konkretne właściwości, takie jak opacity, transform lub fill, zamiast właściwości wywołujących przeliczanie układu.

Do ruchu używaj transform (translate, scale, rotate). Przeglądarki mogą animować transform i opacity bez przeliczania układu strony, czego nie da się powiedzieć o top, left czy margin.

Szanuj zapytanie prefers-reduced-motion. Użytkownicy wrażliwi na ruch mogą włączyć w systemie ograniczenie animacji, a strona powinna wtedy pokazać wersję statyczną albo mocno uproszczoną:

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

#6. Najlepsze praktyki SVG i ikon wektorowych

#6.1 Jak zachować spójny styl ikon

Dobre systemy ikon utrzymują spójność wizualną w całej bibliotece.

Wspólna siatka sprawia, że ikony zajmują tyle samo miejsca i mają podobny ciężar wizualny. Heroicons, Feather, Lucide i Tabler projektują ikony na siatce 24x24, a Material Symbols ma domyślny rozmiar optyczny 24 px. Przy łączeniu ikon z różnych źródeł wspólna siatka to pierwszy warunek spójności.

Jednolita grubość obrysu utrzymuje tę samą grubość linii w całym zestawie. Mieszanie cienkich i grubych obrysów w jednym interfejsie wygląda chaotycznie. Gdy zestaw oferuje kilka grubości, wybierz jedną dla całego interfejsu.

Korekty optyczne dostosowują kształty do ludzkiej percepcji. Koło i kwadrat o tych samych wymiarach nie wyglądają na równie duże, dlatego koło zwykle wystaje nieco poza linię kwadratu. Dopracowane biblioteki ikon mają te korekty wbudowane.

#6.2 Kolory ikon SVG i tryb ciemny

Ikony muszą działać w różnych kontekstach kolorystycznych, od trybu ciemnego po stylizację marki.

currentColor sprawia, że ikona dziedziczy kolor tekstu z kontenera. W pliku SVG ustaw fill="currentColor" lub stroke="currentColor", a kolor kontroluj w CSS:

.icon {
    color: #666;
}

.icon:hover {
    color: #ff6b6b;
}

Własne właściwości CSS porządkują kolory ikon w całym systemie:

:root {
    --icon-primary: #333;
    --icon-secondary: #666;
    --icon-accent: #ff6b6b;
    --icon-disabled: #ccc;
}

@media (prefers-color-scheme: dark) {
    :root {
        --icon-primary: #eee;
        --icon-secondary: #aaa;
    }
}

.icon { color: var(--icon-primary); }
.icon.secondary { color: var(--icon-secondary); }
.icon.accent { color: var(--icon-accent); }
.icon.disabled { color: var(--icon-disabled); }

#6.3 Dostępność ikon SVG: title, aria-hidden i role=“img”

Czytnik ekranu nie widzi ikony, więc każda ikona musi być albo opisana, albo ukryta. Decyzja zależy od tego, czy ikona niesie informację.

Ikona dekoracyjna obok tekstu, który już mówi to samo, powinna zniknąć z drzewa dostępności. MDN wymienia ikony jako typowy przypadek użycia aria-hidden="true" i ostrzega: „Nie używaj aria-hidden="true" na elementach, które mogą otrzymać fokus” (MDN, aria-hidden, tłumaczenie własne). Atrybut jest dziedziczony przez dzieci, więc nie może trafić na rodzica przycisku czy linku.

Ikona znacząca osadzona inline dostaje role="img" i nazwę dostępną. MDN zaleca role="img" na zewnętrznym <svg>, bo czytnik traktuje wtedy grafikę jako jedną całość zamiast odczytywać jej elementy potomne (MDN, rola img). Gdy obok jest widoczny podpis, nazwę lepiej wskazać przez aria-labelledby, w przeciwnym razie przez aria-label.

Element <title> daje grafice krótki, dostępny opis, który przeglądarki zwykle pokazują jako podpowiedź. Dla zgodności z SVG 1.1 powinien być pierwszym dzieckiem swojego rodzica (MDN, element title).

Ikona jako <img> z pliku SVG podlega tym samym zasadom co inne obrazy. W3C WAI zaleca pusty atrybut alt="" dla obrazów dekoracyjnych, bo bez atrybutu alt część czytników odczyta nazwę pliku (W3C WAI, obrazy dekoracyjne).

<!-- Przycisk z samą ikoną: nazwa na przycisku, ikona ukryta -->
<button type="button" aria-label="Szukaj">
    <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><use href="#icon-search"></use></svg>
</button>

<!-- Ikona znacząca bez widocznego tekstu -->
<svg role="img" aria-labelledby="status-title" viewBox="0 0 24 24">
    <title id="status-title">Status: aktywny</title>
    <circle cx="12" cy="12" r="8" fill="currentColor"/>
</svg>

<!-- Ikona dekoracyjna jako plik -->
<img src="/icons/star.svg" alt="" width="24" height="24" />

Wskaźniki fokusa dla interaktywnych ikon pozwalają użytkownikom klawiatury zobaczyć, gdzie są:

.icon-button:focus-visible {
    outline: 2px solid #ff6b6b;
    outline-offset: 2px;
}

Więcej o wymaganiach WCAG dla WordPressa w przewodniku po dostępności WordPress i WCAG 2.2.

#7. Jak rozwiązywać typowe problemy z SVG w UI

#Dlaczego ikony SVG wyświetlają się zniekształcone

Problem zwykle wynika z brakującego atrybutu viewBox lub konfliktu proporcji. Upewnij się, że pliki SVG mają viewBox, a rozmiar ustawiasz w CSS. Nie wpisuj na sztywno jednocześnie width i height, gdy ikona ma się skalować.

#Dlaczego animacja Lottie się nie wyświetla

Sprawdź, czy ścieżka do pliku JSON jest poprawna i czy skrypt odtwarzacza się załadował. Konsola przeglądarki pokaże błędy JavaScript lub błędy sieci (na przykład 404 albo zablokowane żądanie przez politykę CSP).

#Jak dostosować ikony SVG do trybu ciemnego

Ikony z kolorami wpisanymi na sztywno w kodzie SVG nie dostosują się same. Użyj currentColor w atrybutach fill i stroke i ustawiaj kolory w CSS przez zapytanie prefers-color-scheme lub klasę motywu.

#Dlaczego WordPress blokuje SVG mimo wtyczki

Część konfiguracji hostingu i wtyczek bezpieczeństwa ma własne ograniczenia typów plików, niezależne od ustawień WordPressa. Sprawdź ograniczenia na poziomie serwera i ustawienia wtyczek bezpieczeństwa, a w Safe SVG także to, czy Twoja rola ma prawo przesyłać SVG.

#8. Jak wstawiać ikony SVG inline podczas budowania w Astro

Jeśli korzystasz ze stosu headless (na przykład Astro lub Next.js), a WordPress służy jako CMS w back-endzie, ładowanie dynamicznych paczek ikon w czasie działania strony może zwiększyć rozmiar JavaScriptu po stronie klienta. Lepiej rozwiązywać i wstawiać ikony SVG inline już na etapie statycznego budowania.

Oto przykład komponentu Astro, który odczytuje ikonę statycznie podczas kompilacji:

---
// Icon.astro - pobiera SVG i wstawia je inline podczas budowania
interface Props {
  name: string;
  className?: string;
}

const { name, className = 'icon-svg' } = Astro.props;

// Odczyt SVG z lokalnego katalogu lub pobranie z API
const svgPath = `src/assets/icons/${name}.svg`;
let svgContent = '';

try {
  const fs = await import('fs/promises');
  const raw = await fs.readFile(svgPath, 'utf8');
  
  // Wyciągnięcie zawartości ze środka znacznika <svg>
  svgContent = raw.replace(/<svg[^>]*>|<\/svg>/g, '');
} catch (err) {
  console.error(`Build Error: Could not locate icon: ${name}.svg`);
}
---

<svg 
  xmlns="http://www.w3.org/2000/svg" 
  viewBox="0 0 24 24" 
  class={className} 
  fill="none" 
  stroke="currentColor" 
  stroke-width="2" 
  set:html={svgContent}
/>

Ten komponent nie generuje żadnego JavaScriptu po stronie klienta: dane wektorowe trafiają bezpośrednio do HTML podczas statycznej kompilacji.

#Jak zbudować sprite SVG podczas budowania

Żeby nie wstawiać tych samych ścieżek SVG wielokrotnie w jednym dokumencie, zbuduj statyczny sprite. Każda ikona staje się elementem <symbol>, a kod ścieżki trafia na stronę raz, nawet gdy ikona pojawia się wiele razy. Pliki przed złożeniem sprite’a warto przepuścić przez SVGO, opisane w sekcji 4.4:

// Fragment skryptu budowania Vite/Astro
import fs from 'fs/promises';
import path from 'path';

async function buildSvgSprite(iconDir, outputFile) {
  const files = await fs.readdir(iconDir);
  let spriteContent = '<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">\n';

  for (const file of files) {
    if (path.extname(file) === '.svg') {
      const id = path.basename(file, '.svg');
      const content = await fs.readFile(path.join(iconDir, file), 'utf8');
      
      // Wyciągnięcie zawartości i opakowanie jej w <symbol>
      const cleanContent = content
        .replace(/<svg[^>]*>/, `<symbol id="icon-${id}" viewBox="0 0 24 24">`)
        .replace('</svg>', '</symbol>');
      
      spriteContent += cleanContent + '\n';
    }
  }
  
  spriteContent += '</svg>';
  await fs.writeFile(outputFile, spriteContent);
}

Wygenerowany sprite wstaw raz na stronę (w motywie WordPress dobrym miejscem jest hook wp_body_open), a potem odwołuj się do każdej ikony przez <use>: <svg class="icon" aria-hidden="true"><use href="#icon-search"></use></svg>.

#9. Jak generować awatary SVG jako Base64 data URI

Zamiast przechowywać tysiące osobnych zdjęć profilowych dla sekcji komentarzy czy katalogów, możesz generować awatary wektorowe programowo. Zwracaj je jako data URI zakodowane w base64: wtedy użyjesz ich bezpośrednio we właściwościach tła w CSS albo w zwykłych atrybutach src.

Oto implementacja w PHP, która generuje geometryczne awatary SVG i zwraca je jako data URI:

declare(strict_types=1);

namespace WPPoland\UI\Avatars;

/**
 * Generuje data URI SVG zakodowany w base64 na podstawie skrótu ciągu znaków.
 */
function get_avatar_data_uri( string $seed ): string {
    $hash = md5( strtolower( trim( $seed ) ) );
    
    $color_primary   = '#' . substr( $hash, 0, 6 );
    $color_secondary = '#' . substr( $hash, 6, 6 );
    
    $shape_type = hexdec( substr( $hash, 12, 1 ) ) % 4;
    $rotation   = hexdec( substr( $hash, 13, 2 ) );

    $svg = sprintf(
        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" style="background:%s;">',
        esc_attr( $color_secondary )
    );

    $svg .= sprintf( '<g transform="rotate(%d 50 50)">', $rotation );

    switch ( $shape_type ) {
        case 0:
            $svg .= sprintf( '<circle cx="50" cy="50" r="30" fill="%s" />', esc_attr( $color_primary ) );
            break;
        case 1:
            $svg .= sprintf( '<polygon points="50,15 15,80 85,80" fill="%s" />', esc_attr( $color_primary ) );
            break;
        case 2:
            $svg .= sprintf( '<polygon points="50,10 90,50 50,90 10,50" fill="%s" />', esc_attr( $color_primary ) );
            break;
        case 3:
            $svg .= sprintf( '<rect x="25" y="25" width="50" height="50" rx="10" fill="%s" />', esc_attr( $color_primary ) );
            break;
    }

    $svg .= '</g></svg>';

    return 'data:image/svg+xml;base64,' . base64_encode( $svg );
}

Ta funkcja pomocnicza zwraca skalowalny awatar bez zapisywania żadnego pliku graficznego:

<img src="<?php echo esc_attr( get_avatar_data_uri( '[email protected]' ) ); ?>" alt="User Avatar" />

#10. Lista kontrolna przejścia z ikon PNG na SVG

Przepuść każdą ikonę przez SVGO (sekcja 4.4), zanim trafi do motywu albo do budowania sprite’a.
Powtarzające się ikony podawaj z jednego sprite’a z elementami <symbol> i odwołuj się do nich przez <use>.
Zastąp kolory wpisane na sztywno przez currentColor, a kolorami i trybem ciemnym steruj przez zmienne CSS (custom properties).
Każdej ikonie niosącej znaczenie nadaj role="img" i dostępną nazwę; ikony dekoracyjne ukrywaj przez aria-hidden="true" (nigdy na elementach, które mogą otrzymać fokus) albo alt="" w <img>.
Zezwalaj na przesyłanie SVG tylko przez sanitizer (Safe SVG albo enshrined/svg-sanitize) i tylko dla zaufanych ról.
Sprawdź licencję każdego dodawanego zestawu i zachowaj informację o licencji lub komentarze z atrybucją w plikach, które publikujesz.

#Podsumowanie

Postacie z kolekcji awatarów Smashing Magazine z 2008 roku należą do historii designu, ale idea, którą reprezentowały, czyli dzielenie się zasobami za darmo, jest dziś powszechniejsza niż wtedy. Biblioteki ikon, generatory awatarów i zbiory ilustracji z 2026 roku dają projektom każdej wielkości dostęp do spójnych systemów wizualnych.

Darmowy zasób nadal ma licencję. Przed wdrożeniem sprawdź, czy zestaw wymaga uznania autorstwa (Font Awesome Free, styl Fun Emoji w DiceBear), czy wystarczy zachować plik licencji (MIT, ISC, Apache 2.0), czy nie wymaga niczego (CC0).

Dobrze wdrożona ikona jest opisana albo ukryta przed czytnikiem ekranu, dziedziczy kolor przez currentColor, przechodzi przez sanityzację, jeśli trafia do biblioteki mediów, i przez SVGO, zanim trafi do motywu.

[1] Specyfikacja W3C SVG 2; https://www.w3.org/TR/SVG2/

[2] MDN Web Docs, SVG; https://developer.mozilla.org/en-US/docs/Web/SVG

[3] lottie-web (Airbnb); https://github.com/airbnb/lottie-web

[4] DiceBear, HTTP API i licencje; https://www.dicebear.com/licenses/

[5] Humaaans; https://www.humaaans.com/

[6] unDraw; https://undraw.co/

[7] Wtyczka WordPress Safe SVG; https://wordpress.org/plugins/safe-svg/

[8] Font Awesome Free, plik licencji; https://github.com/FortAwesome/Font-Awesome/blob/7.x/LICENSE.txt

[9] W3C WAI, obrazy dekoracyjne; https://www.w3.org/WAI/tutorials/images/decorative/

Ikony i ilustracje z darmowych bibliotek trzeba jeszcze podać w odpowiednim formacie i z bezpiecznym SVG, żeby nie ciążyły stronie. Tę część projektu, od optymalizacji grafik po wdrożenie w motywie, możemy przejąć.