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

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

Що це таке

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

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

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

Сценарії використання іконок

Що ще так яскраво відображає сучасні тренди в веб-дизайні, що не іконки? Лаконічність, мінімалізм, акуратність, простота ліній, чисті кольори. Тож не дивно, що величезна кількість ресурсів оформлені саме за допомогою іконок.

Їх застосовують:

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

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

де використовувати

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

Іконки доречні в таких випадках:

Для оформлення меню

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

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

Для вказівки можливого дії

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

Популярнізначки для сайтуз цієї категорії - зберегти (дискета), поділитися (стрілочки), вийти, скопіювати (дублирующаяся сторінка), вирізати (ножиці), створити (плюс), скачати (стрілка вниз).

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

Для розстановки акцентів

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

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

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

ТОП-18 безкоштовних ресурсів

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

Smashingmagazine

Тут запропоновані добірки від редакції самого ресурсу - оригінальні і у високому дозволі.

Behance

Тут знайдуться готові набори - класичні, оригінальні, кольорові, чорно-білі, великі і дрібнібезкоштовні іконки для сайту. Важливо: для того, щоб знайти стеки (готові набори) на ресурсі, потрібно ввести в рядок пошуку запит free icons

Fribly

Величезний вибір самих різнопланових варіантів, скачати іконки можна стеками (наборами) від різних дизайнерів. Великий плюс - регулярно виходять оновлення.

Thenounproject

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

Flaticon

По праву називається найбільшою базою безкоштовних іконок у векторі. Колекція налічує понад 3,7 мільйонів картинок в PNG, PSD, SVG і інших форматах, сформованих в тематичні набори.

Iconmonstr

Далеко не найбільша, але дуже стильна і витримана в єдиній концепції концепції колекціябезкоштовних іконок. Тут трохи більше 300 добірок, всього близько 5 тисяч варіантів іконок, всі чорно-білі, стильні і лаконічні.

Pixeden

Безкоштовні набори іконок для будь-яких проектів. Всі вони представлені в форматі PNG від 16x16 до 512x512, які підходять для Adobe Photoshop, у векторі.

Dreamstale

Тут не тількибезкоштовні іконки для сайтів, Але і безліч інших корисних для дизайнера "фішок" - шрифти, стокові зображення, текстури та ін.

Pixelsmarket

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

Icojam

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

Graphicsfuel

Велика розмаїтість колекцій, в основному кольорові іконки. Стеки розділені тематично.

Dryicons

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

Goodstuffnononsense

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

Iconshok

Бібліотека сервісу включає більше 2 мільйонів значків, оформлених в 400+ наборів. Можна знайти зображення в різному стилі - кольорові і чорно-Белл, графічні, мінімалістичні і більш об'ємні, незвичайні.

Endlessicons

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

Dribble

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

Streamlineicons

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

Важливо: про авторські права

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

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

Робиться це за схемою "Автор / Джерело / Ліцензія CC". Іноді це не потрібно. Як правило, кожен ресурс має розділ з докладним поясненням цього моменту.

Все не те? Як замовити у ілюстратора

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

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

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

Ще один момент - обсяг замовлення. За один значок заплатити доведеться більше, ніж за штуку в "оптовому замовленні".

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

Популярні ресурси - Weblancer, Freelance, Dribble, Behance.

Платні сервіси: розумний компроміс

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

IconSetc

Працює за передплатою, підходящий варіант для фахівців, які постійно виконують замовлення. Вартість PRO-аккаунта стартує від $ 3.

PixelLove

У базі понад 15 тисяч варіантів, для спрощення пошуку вони розділені на 6 стилів.

{{Pixeden}}

Тут зручний пошук і підписаний формат. Частина матеріалу доступна для безкоштовного скачування, все інше - тільки для передплатників. Місяць коштує $ 10, рік $ 96.

Як вибрати відповідні іконки

В першу чергу зверніть увагу на формат. Якщо ваша мета - скачати іконку, а після завантажити її на сайт, вам підійде PNG, ICO, SVG. Останній - це вектор, найбільш поширений і зручний варіант. Головний плюс - можливість масштабування без втрати якості.

Якщо плануєте кастомизировать іконку, тобто підредагувати її "під себе" в графічному редакторі, вибирайте PSD або AI. Такі можна змінити - додати колір, обсяг та інше.

Важливо враховувати:

1. Не варто гнатися за унікальністю в пошуку рішення простих завдань. Якщо оформляєте меню, віддайте перевагу упізнаваним і зрозумілим символам. Намагаючись вибрати іконки, яких немає ні у кого іншого, можна в підсумку заплутати користувача і завдати шкоди всьому проекту.
2. Дотримуйтеся єдиного стилю - об'ємні, плоскі або контурні. Іконки, підібрані "вроздріб", створять враження недбалості і дешевизни Найкраще вибрати стек від одного дизайнера. Враховуйте і те, як значки будуть гармоніювати з ресурсом в цілому. Слідкуйте, щоб у всіх була однакова підкладка, розмір, колірна гамма.
3. Якщо поруч буде текст, розташуйте іконки зліва, справа або зверху, але не під ним.

Слідкуйте за гармонійним поєднанням шрифтів, кольору тексту, ілюстрацій.