Gdy tworzymy jakąś aplikację, często trzeba ją tak dostosować, żeby wygląd podobał się użytkownikowi i pomagał w jej użytkowaniu. Do tego przydają się na przykład ikony. Można je użyć chociażby do oznaczenia prostych operacji edytuj, dodaj lub usuń obiekt.

Żeby użyć ikon, musimy skądś je pobrać. Najlepiej, żeby były darmowe, ładne i konfigurowalne (gdybyśmy chcieli zmieniać kolor, wielkość, albo nawet potrzebowali różne rozszerzenia plików).

Iconmonstr

Wtedy warto skorzystać z darmowych ikon dostępnych na stronie https://iconmonstr.com/.

Licencja

Jak wygląda sprawa licencji? Czy możemy ich używać w komercyjnych projektach?

Tak! Można używać we wszystkich projektach.

Przykład

Wyszukajmy jakąś przykładową ikonę – na przykład save:

Widać, że mamy aż 91 propozycji ikon dla naszego wyszukiwania.

Opcje

Po wybraniu konkretnej ikony przechodzimy do jej szczegółów. W górnym menu możemy zobaczyć 4 wspierane formaty (SVG, EPS, PSD oraz PNG). Na dolnym pasku widzimy polecane podobne ikony. Mamy opcję pobrania pliku:

lub (w przypadku formatu SVG) dodatkową opcję wyświetlenia kodu ikony jako Embeded content – w formie Inline (przydatna opcja np. w resourcach aplikacji desktopowych):

lub Base64 (używane np. przy stronach internetowych):

Jeśli chodzi o format PNG to są tu spore możliwości edycji:

Można na przykład zmieniać rozmiar ikony, rozmiar samego obrazka w ikonie, kolor główny i kolor tła:

Iconic font

Istnieje możliwość pobrania specjalnej paczki zawierającej Iconic font. Jest w niej np. plik CSS, który dodany do naszego projektu umożliwia korzystanie z danych ikon za pomocą klas w html.

Z wykorzystaniem font, użycie ikony save wyglądałoby następująco:

PS – oczywiście to nie jedyna strona, która oferuje darmowe ikony. Istnieje wiele innych, np. https://materialdesignicons.com/.