Бесплатные иконки для сайта. Иконки для сайта создание сайта


59 ресурсов для тех, кому нужен бесплатный дизайнерский контент: иконки, шрифты, шаблоны, логотипы

Чтобы сделать группу «ВКонтакте», сайт, презентацию или буклет чуточку дружелюбнее, не обязательно нанимать команду дизайнеров и нарушать авторские права. Иногда достаточно своими силами сделать логотип и фавикон, а в сети найти бесплатный дизайнерский контент.

Проверяйте лицензию. Разрешено коммерческое использование – смело обновляйте сайт. Если видите перечеркнутый доллар и надпись Non-Commercial или NC, ограничьтесь оформлением обучающих материалов и портфолио. Или обратитесь к правообладателю за разрешением.

Большинство контента в интернете распространяется по лицензиям Creative Commons. Если необходимо поставить ссылку на автора, добавьте ее в нижний колонтитул или на страницу «О нас».

21 сайт с бесплатными иконками

Captain Icon

Марио из Испании предлагает вам бесплатно скачать 350 векторных иконок. Здесь нет определенной тематики, но много категорий: design, sports, social и др.

Иконки доступны в EPS, PSD, PNG, SVG, SKETCH форматах. По отдельности скачивать нельзя, все наборы – в одном архиве.

Dryicons

Dryicons – сервис, созданный командой энтузиастов: дизайнеров и программистов. Здесь представлено свыше 5 000 иконок в 77 сетах.

Условия бесплатного использования: простановка обратной ссылки.

Ego Icons

Ego Icons созданы на основе базовых геометрических фигур: треугольников, шестиугольников, ломаных линий. Они представлены на сайте в форматах SVG, PDF, AI, SKETCH, EPS и ICONJAR.

Бесплатно можно использовать только 100 иконок. Платный доступ ко всем 3 600 значкам стоит 127 долларов.

Endless Icons

Мин Ким основал Endless Icons, чтобы делиться креативом с дизайнерским сообществом. В его библиотеке – сотни бесплатных черно-белых иконок в PNG и SVG.

Вы можете использовать Endless Icons и в личных, и в коммерческих целях.

Entypo

На entypo – свыше 400 премиум-иконок от Дэниэля Брюса.

Контент распространяется по лицензии Creative Commons, значит, необходимо указать авторство. Коллекцию Entypo можно использовать для личных и коммерческих целей.

Find Icons

Find Icons – каталог бесплатных иконок для сайтов и презентаций. Иконки представлены в форматах PNG и ISO.

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

Flaticon

Flaticon – огромное хранилище иконок от создателей Freepik.

Сайт предлагает свыше 500 000 векторных иконок, объединенных в 9 700 наборов. Они доступны для скачивания в форматах PNG, SVG, EPS, PSD и BASE 64. Прежде чем загрузить иконку, вы можете поменять цвет и выбрать размер.

Бесплатное использование – только с указанием авторства. Подписка за 10 долларов в месяц позволит использовать 400 обычных и 88 премиум-значков без обратных ссылок.

Glyphicons

Ищете минималистичные и монохромные иконки – посмотрите на glyphicons, там их более 800. Благодаря веб-шрифту и формату SVG иконки можно использовать при разработке сайтов, инфографики, мобильных приложений под iOS и Android.

Если не хотите платить, придется столкнуться с ограничением. Бесплатно – только базовый набор глификонов, один формат и минимальный размер.

Good stuff no nonsense

Основатель проекта – Агата, дизайн-иллюстратор из Польши. Разработка иконок – ее хобби.

На goodstuffnononsence можно скачать 5 наборов бесплатных иконок. Кажется, что контента мало, но он – высочайшего качества. Автор оформляет иконки вручную, они выглядят прекрасно.

Если вам понравится стиль, можно нажать “See All” и перейти к выбору платных сетов.

Icojam

Icojam принадлежит команде дизайнеров, создающих иконки более 10 лет. Часть наборов продают, часть – раздают бесплатно.

Умного поиска нет, иконки опубликованы в блоге.

Последнее сообщение оставлено почти год назад, но, возможно, вас заинтересуют ранние записи. На Icojam опубликованы тысячи ярких и красочных иконок.

Icon Archive

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

Сохранить иконку на компьютер можно в форматах PNG, ICO и ICNS.

Iconfinder

Пользователям iconfinder открыт доступ к 1 926 000 бесплатных и премиум-иконок.

Здесь большой выбор размеров, форматов и тем.

Iconmonstr

В библиотеке немецкого дизайнера Alexander Kahlkopf собрано более 3 800 черно-белых иконок. Они хорошо оптимизированы для веба и доступны в форматах SVG, EPS, PSD и PNG.

Иконки предназначены для коммерческого использования. Указывать автора не обязательно.

Icons8

На icons8.com – почти 57 000 иконок, база пополняется ежедневно. Интерфейс дружественный: удобно искать иконки, ходить по категориям, выбирать размеры и форматы.

Бесплатный тариф предусматривает ограничения на размер файла (максимум – 100 пикселей), выбор формата (только PNG) и способ использования (ссылка – обязательна). Хотите без ограничений – покупайте подписку от 20 долларов в месяц.

Фишка icons8 – мобильное приложение. Оно включает всю базу иконок, позволяет их окрашивать в любой цвет и перетаскивать в один клик в Photoshop.

Iconshok

Iconshock – это два миллиона иконок, 800 наборов и 30 стилей.

Скачивайте иконки для личного пользования (например, для оформления резюме) и коммерческих целей (с указанием ссылки) абсолютно бесплатно. Другие лимиты free pack: размер до 72 пикселей, отсутствие исходных файлов, запрет редактирования. Чтобы снять все ограничения, нужно купить годовую подписку за 79 долларов.

Mr.Icons

Mr.Icons – агрегатор, ищущий качественные иконки в интернете. В библиотеке – более 100 000 иконок.

Используйте фильтр license type, чтобы сразу выделить иконки, разрешенные для коммерческого использования.

Noun Project

В коллекции проекта более миллиона иконок, новые появляются ежедневно. Можно найти картинки на любую тему и быстро скачать их в формате PNG и SVG.

Бесплатные иконки требуют указания автора. Если не хотите ставить ссылку, покупайте поштучно или оформите подписку за 10 долларов в месяц.

Oxygenna

Oxygenna – небольшое дизайнерское агентство, которое специализируется на темах Wordpress. Кроме платного контента, там есть раздел freebies с бесплатными наборами иконок.

Скачивайте с oxygenna уникальные наборы иконок в PNG, PSD и AI.

Round Icons

Команда Round Icons любит создавать креативные иконки: «жирные», изометрические, круглые и другие. Всего на сайте их – 30 500 штук, но доступ ко всей коллекции стоит денег. Если не готовы платить, получите на email бесплатные наборы.

Ссылаться на roundicons необходимо в том случае, если вы используете иконки для массового коммерческого продукта (шаблона или темы).

texterra.ru

Иконки для сайта бесплатно

Бесплатные иконки для сайта

Минимализм распространяется с большой скоростью. Дизайн в этом стиле становится очень популярным и он набирает популярность. Я считаю что необходимо идти в ногу со временем и стараться совершенствовать свой сайт постоянно. Помните как я в прошлом уроке создал смурфика на чистом CSS? Похожим образом созданы иконки для сайта, о которых я Вам расскажу сегодня.

Четыре части статьи «Невероятный CSS» можно найти по ссылкам здесь:

Также я не могу упомянуть о иконках социальных сетей, которые я создал сам. Они имеют новогоднюю тематику:

Вы сможете установить любую иконку, из тех что мы рассмотрим ниже, себе на сайт не более чем за 20 секунд!

Краткий обзор сервиса бесплатных иконок для сайта

Перейдите на этот сайт — ПЕРЕЙТИ. Первым делом Вы увидите всё множество иконок, которое Вам предлагается на выбор!

CSS3 иконки

Если Вы нажмете вправо, влево или воспользуетесь навигацией по страницам (внизу), то можете увидеть все иконки, которые доступны на этом сервисе:

CSS3 иконки в красном блоке

Чтобы при просмотре страниц чтобы у Вас не разбегались глаза — иконки сгруппированы в цветовые блоки.

Зеленый блок с иконками Коричневый блок с иконками Голубой блок с иконками

Как установить иконку для сайта?

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

Для начала необходимо сделать активным тот набор, в котором Вам понравилась иконка. И затем просто один раз кликнуть на неё. Появиться окошко с кодом и окном предпросмотра выбранной иконки. Внизу окна предпросмотра можно посмотреть какими браузерами поддерживается данная иконка (т.е. в каким она будет отображаться так как задумывалось):

Установка иконки

Для начала нужно скопировать HTML код, а именно, тег <span> с его классом:

1 2 <span> </span>

И обязательно нам нужно взять код, который находится между тегами <style></style>:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 span { height:40px; width:40px; display:block; position:relative; }   .demoSpan1 { border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px;   background:#333; }   .demoSpan1:after, .demoSpan1:before { content:''; height:28px; width:6px; display:block; background:#fff; position:absolute; top:6px; left:20px;   border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px;   transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); }   .demoSpan1:before { height:12px;   transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg);   top:18px; left:8px; }

Вы его скопируете и он не будет так красиво выглядеть как у меня, потому что этот код я отформатировал, чтобы Вы поняли где и что нужно изменять.

Вот что нужно изменять код себя: строки со 2-й по 5-ю можно вставить в класс demoSpan1, потому что у Вас на странице однозначно есть другие элементы с тегом <span>, которым можно случайно испортить внешний вид. А также хочу заметить: если Вы поменяете класс у тега <span>, то в стилях CSS его также нужно изменить.

Видео — «Нюансы установки иконок»

На видео я показал пример установки иконок для сайта на своём блоге. Также на видео я сказал один нюанс, который может присутствовать в процессе установки иконок. Его легче объяснить и показать на реальном примере:

Вывод

Каждый день появляется всё больше сервисов, которые делают жизнь веб-дизайнеров намного легче. А сегодня я показал как красивые иконки в стиле минимализма можно установить на свой собственный сайт за считанные секунды.

Плюсы от использования этих иконок:

  • + Уменьшают размер HTTP-ответа
  • + Безупречное отображение на экранах iOS устройств
  • + Меньше изображений на сайте
  • + Просты в применении: скопировал — вставил на сайт

Успехов!

С Уважением, Юрий Немец

Бесплатные иконки для сайта 5.00/5 (100.00%) 1 голос(ов)

Понравилась статья - расскажи друзьям! :)

Facebook

Twitter

Вконтакте

Одноклассники

Google+

www.sitehere.ru

7 шагов по созданию иконки для своего сайта

Согласно Википедии Favicon, он же FAVorites ICON, иконка –  является значком для веб-сайта или веб-страницы.Традиционно используется изображение размером 16×16 пикселей формата ICO, помещённое в корень сайта под именем favicon.ico

Итак, как создать иконку для своего сайта? Это не так сложно, как кажется на первый взгляд.

Что для этого нужно? Выполняем действия:

1-ый шаг. Найти

Для начала нам необходимо найти любое более менее приличное и небольшое изображение или значок, который бы хоть как-то вписывался в тематику нашего сайта. В этом, как обычно, поможет нам google и yandex. Итак набираем в запросе ico free или icon free и смотрим что нам выдала поисковая машина. Сразу оговорюсь: free прописано для того, чтобы не было претензий на авторское право того или иного логотипа, картинки или значка. Оно вам надо? Тем более бесплатных файлообменников выше крыши.

2-ой шаг. Сохранить

Определившись с понравившейся картинкой или набором картинок (значков): скачиваем, сохраняем, printscreen-им, скриншотим, кому как нравится.

3-ий шаг. Выбрать (вырезать) нужный

Теперь, если вы скачали набор картинок, нам необходимо вырезать из него только одну, это и будет прототип нашей иконки. Вырезать можно через любую удобную программу например Paint, PhotoShop, Microsoft Picture Manager (эта программа мне нравиться больше всего).

4-ый шаг. Конвертировать в формат .ico

Закидываем полученное изображение сюда или сюда. Я рекомендую использовать именно сайт favicon.cc по той простой причине, что изображение можно не только загрузить для конвертации в формат ico, но также и подкорректировать его, а это не маловажно, так как при конвертации изображение адаптируется под формат 16х16 пикселей и иногда “плывет”, но еще и позволяет наглядно просмотреть (чуть ниже редактора находится секция Preview), как наш значок будет выглядеть в результате проведенных нами манипуляций.

5-ый шаг. Получить значок favicon.ico

Сохраняем конвертированное и/или обработанное изображение. Для этого под секцией Preview есть кнопка Download Favicon. Нажимаем и сохраняем.

6-ой шаг. Переместить favicon.ico в корень сайта

Полученный файл favicon.ico необходимо скопировать в корень нашего сайта, или в то место, где была типовая иконка, если вашей задачей было изменить ее.

7-ой шаг. Если нужно, указать путь к значку

В том случае, если у вашего сайта не было своего значка, то необходимо после копирования его в корень сайта, добавить в каждый файл вашего (если сайт на основе динамических страниц, как в моем случае, то добавить необходимо только в файл header.php) сайта между блоками <head> … </head> путь к нашему значку, выглядеть это будет примерно так:

<head>

<link rel=“shorcut icon” type=“image/x-icon” href=http://it-enginer.ru/favicon.ico />

</head>

Все. Можно выходить на наш сайт и проверять результат.

Вы также можете ознакомиться с другими статьями:

it-enginer.ru