Завантажити готові іконки. ресурсів з безкоштовними шрифтами

Іконки, які ви знайдете на цих ресурсах, можна також використовувати, щоб проілюструвати інформацію в слайд-шоу, прикрасити візитні картки, Меню, флаєри та інше.

Ми написали, що іконки на цих сайтах безкоштовні, але все ж звертайте увагу на умови скачування, так як вони можуть змінитися в будь-який момент.

01. Smashing Magazine

22. PixelsMarket

26. Blugraphic

Blugraphic - варіанти PSD, PNG і векторних іконок. Пошук обмежений тегами, але можна підписатися на розсилку і щотижня отримувати безкоштовну добірку по електронній пошті.

27. Icon Shock

Icon Shock - це тисячі безкоштовних іконок для особистого використання. Щоб застосувати картинку в комерційному проекті, потрібно внести разовий платіж.

28. CSS Author

CSS Author пропонує щотижневі добірки кращих безкоштовних іконок в мережі.

29. Creative Tail

Хочете свіжих іконок? На Creative Tail є набори, яких більше ніде не знайти.

30. All-Free-Download

All-Free-Download пропонує легкий пошук і прямі завантаження PSD, PNG і векторів.

31. Ego Icons

Ego Icons пропонує більше 1500 преміальних іконок і 100 безкоштовних векторних значків. Відвідайте також дочірні сайти, клікнувши по кнопках верхньої навігаційної панелі.

32. AlienValley

На AlienValley представлений широкий асортимент іконок високої якості в обмін на вашу адресу електронної пошти.

33. Dreamstale

Dreamstale забезпечить вас відмінними безкоштовними іконками преміум класу за умови вказівки авторства.

34. DuckFiles

35. 1001 Free Downloads

1001 Free Downloads спеціалізується на плоских іконках, представлених безліччю прекрасних і химерних варіантів.

36. GraphicsBay

37. Pixeden

На Pixeden можна шукати іконки в декількох розмірах. Тут широкий вибір від 16х16 до 512х512 в форматі PNG.

38. NounProject

NounProject - це зручний пошук, легка завантаження і висока якість іконок. Посилання на автора обов'язкове. Членство з щомісячним внеском знімає обмеження на скачування.

39. Iconmonstr

Iconmonstr пропонує іконки в декількох розмірах без вказівки авторства.

40. Fusionplate

Іконки PSD - незамінний елемент будь-якого дизайну UI, який не поступається за важливістю навіть шрифтів, однак на практиці рідко хто займається розробкою власних іконок для кожного веб-проекту. З іншого боку, на пошук відповідних за якістю і оформлення іконок також йде чимало часу, але сьогодні ми вирішили допомогти вам, і підготували добірку безкоштовних наборів іконок на всі випадки життя.

01. Icons8

Icons8 - набір з 20 тисяч плоских іконок в будь-яких форматах, розмірах і кольорі! Тут представлені такі категорії, як бізнес, одяг, їжа і багато інших. Icons8 можна скачати у вигляді додатку для Mac або у вигляді ZIP-архіву.

02. Freepik

Яскрава колекція векторних іконок від спеціалізованого ресурсу Freepik - лише одна з безлічі представлених. Вона ідеально підійде для ділових і незалежних проектів. Додатково скачати PSD іконки можна в форматах .AI, .EPS і .SVG.

03. Iconfinder

Цей набір, виконаний в чорно-білому кольорі, містить комбінацію чітких функціональних і емоційних векторних іконок. Крім стандартних іконок цей набір містить іконки у вигляді сердець і очей, що дозволить вам надати власним проектам емоційне забарвлення.

04. 195 flat flag PSD icons

Відмінний набір іконок PSD для сайту, який можна використовувати при розробці міжнародного сайту, інтернет-магазину або блогу про подорожі. У набір входить 195 безкоштовних іконок із закругленими кутами.

05. Metro UI Icon Set

Якщо ви фанат Windows 8, то вам варто познайомитися з цим безкоштовним набором іконок. Він включає в себе 700 добре оформлених іконок, які можна вільно застосовувати в проектах будь-якого типу.

06. Modern UI Icons

Ще один набір безкоштовних іконок, який можна використовувати при створенні призначеного для користувача інтерфейсу програмного забезпечення для Windows або для Android / iOS. завантаживши даний набір, Ви отримуєте 1000 плоских, створених вручну, іконок, в тому числі навіть іконки для шторки додатків в Windows Phone.

07. 350 pixel perfect icons

Неймовірний набір з 350 ідеально чітких іконок для додатків або сайтів. При цьому їх можна змінювати в розмірі без втрати якості.

08. 80 mini icons

80 ідеально чітких мініатюрних ікон, які можна скачати як в PSD-форматі, так і у вигляді іконічного шрифту. Ці охайні і витончені соціальні іконки PSD ідеально підійдуть для проектів будь-якого типу.

09. Simple and practical web icon vector graphic

Безліч корисних іконок, які можна використовувати в особистих і комерційних проектах.

10. Free flat icons

Набір іконок, виконаних в плоскому стилі, серед яких можна виділити календар, електронну пошту, годинник, карти і багато іншого.

11. Mono icons

Набір, який включає в себе 108 унікальних монохромних іконок, виконаних в стилі мінімалізму. Всі вони доступні в форматі PNG при розмірі 32 на 32.

12. Metrize icons

Безкоштовна колекція в стилі Metro, які можна використовувати у власних додатках і веб-проектах. Іконки соціальних мереж PSD безкоштовні як для особистого, так і для комерційного використання. В архіві представлені не тільки формати PSD, SVG, ESP і AI, але також і веб-шрифти.

13. Tab Bar Icons iOS 7

Елегантний набір іконок, розроблених під натхненням від iOS 7, який ви можете використовувати в своїх додатках. Завантажити іконки можна в наступних форматах: PSD, AI і ESP.

14. Chunky Pika Icon Set

Іконки в стилі Pika, створені агентством Dutch Icon з Данії. Цей набір включає в себе 42 ідеально чітких іконки.

15. Iconic

Ще один набір простих, але привабливих іконок, які ідеально підійдуть для мінімалістичні дизайнів. Iconic є open source набір, який можна завантажити в PNG, SVG, SWC і інших форматах, що дозволить адаптувати їх під власні дизайни.

16. 44 Shades of Free Icons

Набір з 44 іконок. Він містить PSD іконки для форуму, що дозволить без праці відредагувати і адаптувати їх під власні проекти.

17. Token icon set

Token включає в себе 128 унікальних ікон, доступних в форматі ICO в розмірах 16 на 16 пікселів, 32 на 32 пікселів і 256 на 256 пікселів, а також в форматі PNG в розмірі 128 на 128 пікселів. Кожна ікона представлена \u200b\u200bв темному і світлому варіантах, і доповнена PSD-файлом.

18. Flat icons (PSD)

Строкаті іконки в плоскому стилі, які можна скачати в форматі PSD і відредагувати під власні потреби.

19. Free 32px icons set

Набір, в якому ви знайдете іконку PSD будь-якого призначення: Skype, Facebook, Twitter, RSS, чашка кави, "лайк" і багато іншого.

20. 48 flat designer icons

Якщо ви фанат мінімалізму, то цей набір точно вам сподобається. Він складається з 48 безкоштовних іконок, що відображають офісні завдання, соціальні аспекти, а також подорожі. Всі вони представлені в форматах AI і PNG, і їх можна масштабувати без втрати якості.

21. Plex icons set

Набір включає в себе понад 100 ікон, серед яких календарі, антивірус, годинник, електронна пошта, додатки Microsoft Office, соціальні мережі, А також багато іншого.

22. Vectory mini free

Набір з більш ніж 1000 іконок PSD, розроблених командою Icojam. Всі вони представлені також в форматі PNG. Вони ідеально підійдуть для використання при розробці нового сайту, так як їх можна безкоштовно використовувати як в особистих, так і комерційних проектах.

23. Eldorado mini free

Чергова колекція міні-іконок від Icojam, в якій представлено понад 1200 ікон в розмірі 40 на 40 пікселів.

Незважаючи на те, що зміни тенденцій дизайну користувальницького інтерфейсу, в цьому році не були настільки значущими, як ми спостерігали в попередні роки, саме, явно стали більш досконалими, більш спеціалізованими, повністю охопивши і змішавши все кращі стилі від раніше популярних іконок.

Можливо, цей рік видався не особливо «врожайним» для дизайну іконок, але тим не менше, кілька цікавих наборів, які заслуговують на вашу увагу, все ж засвітилися на горизонті. У цьому огляді пропоную на розгляд 50 кращих (суто на мій погляд) безкоштовних колекцій ікон, що з'явилися в відкритому доступі протягом 2017 року. Всі набори абсолютно безкоштовні і доступні для скачування без яких би то не було обмежень. Під кожним зображенням є посилання на ресурси, перейшовши за якими, ви зможете детально ознайомитись з вподобаним набором іконок і при бажанні завантажити.

Контурні або лінійні іконки дуже популярні в світі веб-розробки, так як відрізняються особливою простотою форм і мінімалізмом, не жертвуючи при цьому інформативністю. До того ж, в більшості своїй, представлені піктограми можна використовувати не тільки для сайтів, вони також відмінно підходять для додатків на платформі Android і iOS.

По-справжньому величезна колекція якісних іконок на всі випадки життя. На сьогоднішній день представлено близько 60,000 іконок в будь-якому форматі, розмірі і кольорі. Бібліотека щодня оновлюється і поповнюється, від 3 до 20 іконок в день.

кількість: 60 000 +
формати: SVG, AI, EPS, PNG, PDF, Fonts

Пакет включає в себе 1800 іконок на білому і чорному тлі в форматах: .sketch .psd .ai .svg .eps і .png.

Невеликий набір якісних лінійних іконок в форматі .ai

Безкоштовний пакет з 70 векторних іконок в форматах .sketch .ai

Векторні іконки в форматах Ai, EPS і SVG

Хороший набір з 90 безкоштовних контурних іконок, а так само представлені іконки із суцільною фонової заливкою, для Sketch і Illustrator.

Bytesize

Відмінний набір безкоштовних іконок у форматі SVG. Кожен значок кодується вручну по сітці 32 x 32 і використовує штрих SVG, що забезпечує максимальну гнучкість стилю; це означає, що ви зможете налаштувати вагу, колір, розмір і, при необхідності, зробити краю іконок округлими або квадратними.

У наборі представлені 38 контурних іконок популярних інструментів редактора зображень, для вільного скачування доступні іконки в форматах AI, EPS, SVG і прозорого PNG (1024px).

Чудовий набір абсолютно безкоштовних, контурних іконок в форматах .png .pdf .svg .sketch .ai

Невеликий набір якісних міні-іконок.
формати: AI, EPS, PNG, SVG
Розміри: 16 x 16, 32 x 32

Іконки на чистому CSS

В цьому розділі огляду представлені ресурси надають у вільний доступ пакети іконок розроблені на чистому CSS. Відмінна альтернатива використанню зображень в якості іконок. Для підключення таких бібліотек іконок досить одного файла.css, також в більшості своїй, дані ресурси надають можливість підключення наборів іконок безпосередньо зі своїх серверів, що досить зручно.

У комплекті 512 іконок, бібліотека регулярно поповнюється.

Невелика бібліотека іконок на чистому CSS.

Набори барвистих різнокольорових іконок

Набір з 30 кольорових лінійних іконок в свіжих пастельних тонах. У комплект входять іконки в векторному форматі (SVG) і PNG різних розмірів.

120+ Безкоштовних барвистих іконок в форматі PSD

Колекція з 30 плоских изометрических іконок. Всі ікони, включені в набір, повністю редагуються і налаштовуються в Illustrator. В комплекті різні розміри PNG.
формати: AI, EPS, PNG
Розміри: 57px, 114px, 228px, 456px, 912px

Набір з 24 різнокольорових іконок з водної спортивною тематикою. Іконки поставляються в форматі SVG і розроблені з використанням легкої, річної колірної схеми і оптимальної масштабованості.

Набори іконок в матеріальному дизайні

Такі іконки покликані стати стандартними для додатків, виконаних в уніфікованому стилі «матеріального» дизайну, який Google представила в версії Android 5.0. У той же час, вони однаково добре підходять і для Android-додатків, і для iOS, і для веб-додатків.

250 іконок в Sketch форматі

Це набір з 900 + іконок Google для додатка Sketch. Всі вони спочатку з бібліотеки Google, яка періодично оновлюється і поповнюється.

Іконки символів і піктограм

Безкоштовні набори іконок різних символів і піктограм.

Universal Themes - Набір векторних іконок

У комплект входить 100 векторних іконок, які розроблені з урахуванням сучасних вимог веб-дизайну, іконки представлені в форматі SVG, тому ви зможете редагувати, масштабувати і змінювати колір іконок до тих пір, поки не отримаєте потрібний вам результат.

Комплект з 90 симпатичних, багатоцільових іконок в форматах .sketch і .ai

Безкоштовний набір іконок в форматах PSD, AI, EPS, PDF, SVG, Sketch, Webfont

Добре пророблений безкоштовний набір з 70 базових іконок в двох варіантах, для світлого і темного фону. Файли AI і SKETCH в комплекті.

Безкоштовна бібліотека з 100 шрифт-іконок, також в архіві надані всі коди для демонстраційної сторінки, формати веб-шрифтів і.SVG-файли.

У набір призначеного для користувача інтерфейсу UI включені 100 векторних іконок, які розроблені з урахуванням особливостей призначених для користувача інтерфейсів, іконки в форматі SVG, контурні і кольорові версії. Ви можете вільно використовувати ці іконки в своїх особистих і комерційних проектах.

Набори графічних і веб-дизайнерських іконок

Цей набір містить 33 повністю масштабованих векторних іконки в контурному стилі. Кожна іконка доступу в EPS, AI, PSD, PNG і SVG форматах.

25 іконок з категорії дизайн фігур

вражаючий набір красивих іконок ручної роботи, складається з 25-ти легко редагованих і готових до використання іконок, доступних абсолютно безкоштовно. Поставляється в двох колірних варіантах (mango & icicle) і всіх зручних форматах: AI, EPS, SVG і PNG.

Ви можете використовувати ці іконки для особистих і комерційних проектів.
формати: AI, EPS, SVG, PNG
Розміри: 16 x 16, 32 x 32

Набір іконок художніх інструментів

Набір безкоштовних іконок містить векторні файли в форматах Illustrator AI і.SVG, а також в форматі PNG, доступні варіанти, як в колірному, так і в лінійному стилях, в 5-ти розмірах (32px, 64px, 128px, 256px і 512px)

Іконки представлені у всіх зручних для роботи форматах: EPS, AI, SVG і PNG.

Комплекти плоских іконок

У цьому розділі представлені безкоштовні набори іконок на найрізноманітнішу тематику в кращих традиціях плоского стилю. Використання плоских іконок в дизайні дозволить зробити сайт або додаток стильним, сучасним і більш зрозумілим для користувача.

Blobs

Безкоштовний набір з 1000+ іконок в яскравій кольоровій гамі, представлені в форматах (AI, PSD & SVG)

Flat Line - Набір іконок UX & eCommerce

83 іконки в плоскому стилі для призначеного для користувача інтерфейсу і електронної комерції

По-справжньому величезна бібліотека іконок в різних стилях для особистого та комерційного використання, в тому числі великий вибір іконок в плоскому дизайні. Безкоштовно доступні іконки в різних розмірах до 72px і в форматі PNG. Ви можете завантажити як весь пакет, так і кожну вподобану іконку по-окремо, попередньо обравши потрібний вам розмір

Набір іконок для оформлення робочого простору, представлений у вільний доступ в форматах AI & EPS.

У наборі представлено 70 різних іконок призначеного для користувача інтерфейсу, в форматах SVG і PNG.

Набори іконок для бізнесу та електронної комерції

Набір з 36 безкоштовних іконок для банків і грошей, ці іконки з плоским стилем ідеально підходять для додатків або веб-сайтів, пов'язаних з банкової діяльністю. Іконки представлені в векторних формах (AI, PSD, EPS, PNG & SVG) і отже, легко редагуються і змінюються.

Набір виконаний в плоскому стилі, в комплекті 50 яскравих іконок, що охоплюють всі основні галузі електронної комерції, включаючи іконки стану кошика, іконки способів оплати, доставки, іконки торгових категорій і багато, багато іншого. Представлені іконки в двох форматах SVG і PNG, ви можете вільно використовувати їх в своїх особистих і комерційних проектах.

50 барвистих іконок в плоскому стилі по бізнес тематиці, представлені в форматах AI і SVG, тому їх можна нескінченно масштабувати, не втрачаючи при цьому якості зображення, ідеально підійдуть для адаптивних веб-дизайнів. Ви можете вільно використовувати їх в своїх особистих і комерційних проектах.

Безкоштовний набір з 40 векторних іконок по темі електронної комерції. Безкоштовна версія містить файли форматів Adobe Illustrator (.ai), PDF і Encapsulated PostScript (.eps).

Набори іконок на погодну тему

Пакет іконок погодної тематики, що містить 30 чудово намальовані іконок в форматах .png і .sketch. Відмінно впишеться в дизайн додатків і веб-сайтів про погоду.

Великий пакет шрифт-іконок CSS з 222 іконками погоди, готовими до підключення в Bootstrap або будь-який інший проект, для якого потрібні високоякісні метеорологічні іконки. Набір регулярно оновлюється і поповнюється.

Звичайно, представлені в добірці ресурси, це лише мала частина всього різноманіття дизайнерських розробок представлених раніше і що з'явилися протягом цього року. Популярні і давно добре себе зарекомендували ресурси, в більшості своїй не потребують представлення, так що в даному огляді спробував виділити порівняно нові і якісні роботи. Сподіваюся кому-небудь стане в нагоді.

З повагою Андрій

Упевнений, що гарний набір іконок знадобиться завжди. Значки і іконки, при правильному їх використанні, є дуже цінним інструментом для дизайнера. Вони притягують нашу увагу або звертають увагу на будь-яку річ. У багатьох користувачів сайтів функціонал запам'ятовується виключно візуально тобто за допомогою картинок.

Ця колекція ікон випущена в допомогу дизайнерові. Колекція абсолютно безкоштовна. Будь ласка, прочитайте ліцензійну угоду перед використанням значків - ліцензія може час від часу змінюватися. Значки також можуть виявитися корисними для корпоративних проектів, блогів, інтернет-журналів, щоденників, інтернет-додатків. Будь ласка, не соромтеся пропонувати свої набори іконок в коментарях до даного посту.

Іконки для web додатків.

Chalkwork HTML є безкоштовним набором HTML-тематичні іконки. Вони чудово поєднуються з усією родиною іконок Chalkwork. Ці іконки Ви можете встановлювати абсолютно безкоштовно для особистих і комерційних цілей. Комплект доступний в 3 розмірах і 6 форматів: прозорий PNG, TIF, GIF, BMP, ICO Windows і Mac ICNS.

Як створити сайт самому?

Ікони рука покажчик.

Безкоштовні ікони, які включають 36 рук-покажчиків, 6 різних типів з 6 колірними варіантами. Також є ісходнік.psd формату.

452 іконки вільно доступних для приватних і комерційних цілей.

Базова комплектація.

42 високоякісні іконки в 64 × 64, 32 × 32 × 16 і 16 розмірів. Mac OS, Win and .PNG-formats. Mac OS, Win і. PNG-форматі.

Ця безкоштовний пакет ікон призначений для використання в особистих і комерційних проектів, і повинен бути використаний без присвоєння. Комплект не може бути перерозподілено. Комплект включає в себе 26 стильних ікон розроблених Midtone Design Studio. Кожна ікона является.PNG 48 × 48px. Значки були створені дизайнером Jonatan Кастро Фернандес.

Комплект Файл статус іконки включає 16 ікон, які можуть бути використані для веб-додатків.

Danish Royalty Free.

Дизайн: Jonas Rask.

Ікони Onebit Set.

80 красивих іконок в резолюції 48 × 48px ,. PNG.

Завантажити також частина 1.

On Stage Icons Set.

Набір містить 49 вільних векторних іконок, в тому числі PSD, які можуть бути корисні для корпоративних і особистих проектів. Ви можете використовувати набір безкоштовно, без будь-яких обмежень. Іконки доступні в форматі PNG в резолюції 128 × 128 пікселів. Також включені іконки формата.PSD.

Цей набір містить 9 браузерів іконок в 64 × 64, 32 і 32 × 16 × 16 пікселів. Включає в себе основні браузери, як Mozilla Firefox, Internet Explorer, Opera, Google, Chromeі багато інших.

Milky Icons Set.

Набір містить 131 ікону в більшості своїй зеленого кольору, що має дуже приємний зовнішній вигляд для темного фону.

Марк Джеймс (FamFamFam) створив великий набір 1022-гладку шовковистого кольору 16 × 16 ікони в форматі PNG.

У четвертій частині «кокеток» додано ще 50 ікон. Основне призначення цих ікон - це додати любов і грайливість Вашим проектам. Іконки наступних розмірів: 16 × 16px, 32 × 32px, 48 × 48px, 64 × 64px і 128 × 128px і 32-бітної прозорості PNG формату файлу.

У 5 частини «кокетка» міститься 50 високоякісних іконок. Розміри: 16 × 16px, 32 × 32px, 48 × 48px, 64 × 64px і 128 × 128px і 32-бітної прозорості PNG формату файлу.

Іконки для e-commerce (електронна комерція).

Chalkwork платежі доступна в 3 розмірах і 6 форматів: прозорий PNG, TIF, GIF, BMP, ICO Windows і Mac ICNS.

Значки безкоштовні для особистого використання, а також безкоштовні для комерційного використання, але і дизайнери вимагають посилань на веб-сайті. The archive contains the icons in all sizes, Windows, Mac and PNG formats. Архів містить значки всіх розмірів, Windows, Mac і PNG форматах.

23 значка кредитні картки безкоштовно для вільного скачування.

Комплект свіжих ікон.

Цей набір містить 59 растрових і векторних іконок. У комплект входять іконки в PNG, ICO і ICNS форматів. У EPS векторний файл доступний також.

Корисні набори іконок.

Набір безкоштовних мультимедійних векторних іконок різних кольорів і стилів.

Fortune 500 беджі.

Понад 200 іконок відомих брендів, PSD включені.

Комплект з 50 пасажирських і пішохідних символи, розроблені AIGA тепер доступна в Інтернеті безкоштовно. Є EPS і GIF формат.

Аудіо ікони.

Невеликий набір з 48 × 48px ікони: M-Box, на M-Audio Axiom 25 Midi-клавіатура і монітор TAPCO S5 колонок. Ці ікони є безкоштовними для особистого використання. Є в.ICNS, .PNG.

Соціальні набори іконок.

Соціальні медіа міні упаковка іконок.

Цей набір складається з 30 (16 × 16) тонко розроблених соціальних медіа міні іконок. Вони можуть вільно використовуватися в некомерційних цілях.

Соціальні іконки у вигляді хмар. Формат.PNG.

Як створити сайт самому?

Які технології та знання необхідні сьогодні, щоб створювати сайти самостійно? Дізнайтеся на інтенсивний!

Набір містить 16 соціальних ікон (прозорою) PNG формату.

Ці іконки містять Facebook, Blinklist, Feedburner, Flickr, FriendFeed, Furl, Gmail, Google, Heart icon, Last FM, Linked IN, Magnolia, Newsvine, PayPal, Skype, Sphinn, Twitter, Vimeo, Yahoo and You Tube icons. Всі ікони в чотирьох розмірах: 16 × 16, 32 × 32, 64 і 64 × 12 × 128px. І всі вони є вільними.

Кожна іконка в форматі. JPG і поставляється в двох розмірах: 48 × 48px і 96 × 96px. Кожна іконка темно-сірі на білому тлі.

YouTube, Delicious, RSS, Twitter, Facebook, Flickr, Digg, StumbleUpon, mySpace, Feedburner, Skype, Yahoo, Last.fm, Linkin, Reddit and Gmail.

Dead-Прості Соціальний медіа Ікони | Майстер Fidgeter.

Просто, чисто і красиво. 16 × 16px міні-соціальних ікон.

28 іконок в форматі PNG (256 × 256, 128 × 128, 48 × 48, 32 × 32, 16 × 16), ICO (256 × 256, 128 × 128, 48 × 48, 32 × 32, 16 × 16) та ICNS (256 × 256, 128 × 128, 48 × 48, 32 × 32, 16 × 16).

У цей набір входять іконки для Blip.fm, Digg, Facebook, Firefox, Flickr, Meneame, Myspace, Technorati, Twitter, Vimeo, WordPress, Youtube, LastFM, RSS, Blogger, GMail, Reddit and StumbleUpon. Іконки доступні в розмірах 24 × 24, 32 × 32, 48 і 48 × 64 × 64. Випущено під ліцензією Creative Commons.

Циркуляр соціальні ікони.

ZIP-файл включає в себе 3 розміру на 17 іконок: 128 × 128px, 64 × 64px і 32 × 32px. There is an icon for the following: Blogger, Delicious, DesignFloat, Digg, Facebook, Flickr, Google, a heart icon that will work for anything (such as bookmark), MySpace, Reddit, an RSS icon, StumbleUpon, Technorati, Twitter, WordPress, Yahoo! Дизайн Eli Burfordіз Австралії.

Красиві набори іконок.

Стиль пошти.

Колекція ікон мішечків була розроблена Paul Kadysz. Вона містить 5 високоякісних іконок. На цей раз у нас є 3 різних форматах (. ICO ,. Icns і. PNG) і 6 розмірів! 512px-16px (except .png). 512px-16px (крім. PNG). Ось як набір виглядає.

350 безкоштовних красивих іконок на робочому столі, також можуть бути використані online. Дизайн майстер David Lanham.

30 безкоштовних іконок, які мають розмір: 256 × 256, 128 × 128, 64 × 64, 48 × 48, 32 × 32, 24 × 24, 16 × 16 пікселів і форматах PNG, ICO і icns.

Проекти іконок для безкоштовного скачування.

Набір містить 18 красивих значків, пов'язаних з управлінням проектами. Набір включає в себе ікони адресу карти, гістограми, календар, годинник і часу, конференц-пристрій, контакти, документи, проекти, пошук, карта сайту і т.д. Абсолютно безкоштовно. Використання будь-якою метою.

Корисний набір векторних ікон (256 × 256 пікселів). Він містить книги, кисті, пастель, кліп, кольорові олівці, документ, ластик, блокнот, палітра, ножиці.

Адаптивний дизайн - популярна тема. Екрани давно вийшли за межі стандартних дозволів, і сайти можуть дивитися і на аксесуарах розміром з долоню, і на великих моніторах. Сайт повинен однаково добре виглядати незалежно від розміру пристрою і щільності пікселів. Для адаптації дизайну і контенту існує багато різних методик і технологій. Векторна графіка, SVG, по-моєму, одна з найбільш цікавих тем в цьому напрямку.

SVG-графіку зручно використовувати для іконок, при цьому вони не будуть виглядати мильними на пристроях з ретиной і їх можна розтягувати без втрати якості.

Ось, наприклад, один SVG-спрайт в 4-х різних розмірах, вихідний - 32px:

SVG відмінно справляється з цим завданням і добре підійде для використання в адаптивних розкладках.

Іконки для дизайну можна взяти з готових наборів або намалювати свої.

Набори готових іконок

iconmelon.com

Велика колекція ікон на різні теми. Завантажені іконки пропонується вставляти в HTML за допомогою use.

icomoon.io

Найзручніший інструмент. Можна не тільки вибрати і завантажити готові іконки, але також можна завантажити свої і отримати їх у вигляді шрифту і / або спрайту. Разом зі спрайтом пропонується завантажити його PNG-версію.

flaticon.com

Велика колекція, іконки зручно поділені на категорії. Вибрані іконки можна скачати в окремих форматах (шрифт, SVG, PNG) або у всіх відразу.

малюємо самі

Для створення свого набору іконок потрібно векторний редактор:

• Adobe Illustrator - по-моєму, кращий. 599 руб. / Місяць в складі підписки на Creative Cloud;
• Inkscape - безкоштовний і не дуже зручний;
• Sketch - для Mac OS, $ 79.99. Має деякі проблеми з векторизацией обводок, але взагалі досить зручний.

Зниження ваги

Готовий SVG-файл зазвичай містить багато зайвого, але при цьому добре піддається оптимізації. З коду видаляються непотрібні атрибути, прогалини і переноси, а в числах зменшується кількість знаків після точки. Вага файлу зменшується на 30-50%. Інструменти для оптимізації:

grunt-svgmin - завдання для Grunt з використанням svgo. При цьому файли самі будуть братися з папки з вихідними кодами, оптимізуватися і складатися в папку з результатами. Дуже зручно.

Спрайт або іконочние шрифт?

Шрифт - зручна альтернатива спрайту. Не треба морочитися сіткою і розташуванням іконок, зручно додавати нові символи, хоча для цього потрібні додаткові інструменти.

За допомогою шрифту можна робити не тільки однотонні іконки, але і різнокольорові.

Свій шрифт можна зробити, наприклад, на сайті icomoon.io/app/. Приблизна послідовність дій:

1. Виберіть іконки з набору і / або завантажте свої.
2. Натисніть внизу кнопку Font.
3. На цьому кроці можна перепризначити символи для іконок або відразу завантажити вийшов шрифт.

Разом зі шрифтом в чотирьох форматах (.woff, .svg, .ttf, .eot) завантажується CSS і демо-файл.

Вбудовувані шрифти працюють навіть в 8-м IE, але при цьому мають несподівані проблеми з підтримкою в деяких сучасних браузерах. Opera Mini взагалі не підтримує кастомниє шрифти, Firefox'у потрібні заклинання для сервера, де лежить шрифт (вирішується за допомогою base64), Chrome може вивантажити шрифт, якщо ви надовго залишили вкладку відкритою:

також в Chrome на Windows7 сторінка з вбудованими шрифтами може зависати при відкритті, а в деяких інших браузерах замість іконок може виявитися все що завгодно:

Картинка з статті Кріса Коеру Icon System with SVG Sprites. Я на цьому ж місці якось бачила ієрогліфи, але зараз там SVG, так що скрін зробити не вийде. CSS-tricks, до речі, дуже активно використовує SVG в своєму новому дизайні, а розробники Codepen в новому дизайні редактора відмовилися від використання іконочние шрифтів на користь SVG.

Незважаючи на зручність використання, проблеми підтримки шрифтів в наразі змушують зробити вибір на користь іконок на SVG.

Хочеться сподіватися, щоб в майбутньому вбудовуються шрифти будуть краще підтримуватися.

Як існують способи вставки SVG на сторінку?

спрайт

.icon (background-image: url (your.svg);)

плюси:

• короткий читабельний код;
• картинка кешируєтся;

мінуси:

• запит до сервера;
• в старих опери фоновий SVG підтримується дивно: можуть виникати проблеми при додаванні рамки елементу з SVG-фоном, а в Opera Mini працюють тільки фони без viewBox;
• іконки в спрайт недоступні для стилів сторінки;
• великі спрайт можуть викликати проблеми з продуктивністю.

Base64 в data URI

.icon (background-image: url (data: image / svg + xml; base64, PHN2ZyB4bWxucz0iaHR0cDovL ...);)

плюси:

• немає запиту до сервера.
• хороша підтримка браузерами: все, крім Опери на Presto і старих IE.

мінуси:

• картинка не кешируєтся і кожен раз рендерится заново;
• довга рядок в CSS;
• нЕ читабельно: за кодом незрозуміло що він містить;
• закодована картинка може важити більше вихідної;
• для закодування / розкодування потрібні додаткові інструменти;
• іконки недоступні для стилів сторінки.

SVG в data URI

.icon (background-image: url ( "data: image / svg + xml; utf8, плюси:

• немає запиту до сервера;
• щодо читабельний код (можна прочитати або відредагувати);
• не вимагає розкодування;
• підтримується всіма сучасними браузерами, якщо закодувати SVG.

мінуси:

• нЕ кешируєтся;
• довга рядок в CSS;
• іконки недоступні для стилів сторінки;
• підтримується тільки браузерами на Webkit.

Use (перевикористання SVG-елементів)

плюси:

• читабельний код;
• картинкам можна додати title і desc;
• символи доступні для стилів сторінки. Також можна задати іконка fill \u003d "currentColor", і вони будуть фарбуватися разом з текстом.

мінуси:

• вставляється безпосередньо в HTML. Перед використанням елементи повинні бути оголошені у верхній частині сторінки в інлайновом SVG. Можливо, є більш витончений спосіб підключення бібліотеки елементів, мені не вдалося знайти.

шрифт

.icon (content: "\\ 6c"; font-family: "icomoon";)

плюси:

• зручний код;
• єдиний із способів підтримується в IE8 без фолбеков;
• іконки доступні для стилів сторінки, і будуть фарбуватися разом з текстом.

мінуси:

• якщо шрифт не завантажився (ще не завантажився, взагалі не завантажився або вже вивантажився), замість іконок будуть букви або символи юникода або нічого.

Живий приклад з підтримкою браузерами:

Приклад представлений як є, без спроб забезпечити сумісність з різними браузерами. Ви можете відкрити демо в сюжеті браузері і подивитися як в ньому підтримуються різні способи.

Відображення іконок в браузерах без підтримки SVG

В даний момент самий зручний і надійний спосіб вставки - у вигляді спрайту.

Для заміни картинок в IE8 і старше можна використовувати спосіб з множинними фонами:

Icon (background-image: url (your.png); / * PNG для IE6-8 * / background-image: url (your.svg), none;)

Для старих Опер можна використовувати такий селектор:

Doesnotexist: -o-prefocus, .icon (background-image: url (your.png);)

Таким чином можна домогтися, щоб іконки у користувачів з різними браузерами виглядали приблизно однаково.

З існуючих способів вставки іконок мені найбільше подобається шрифт. Він був би ідеальним, якби не проблеми з підтримкою. Use мені не подобається змішуванням розмітки і оформлення, хоча радує доступність для CSS і можливість додати title і desc. Є ще один дуже хороший, але погано підтримуваний спосіб, але це тема для окремого посту.

UPD: Велике дякую