Каталог иконок: Бесплатные иконки SVG, PNG, ICO или ICNS

Сайты с бесплатными иконками и логотипами – База знаний Timeweb Community

Сайт состоит из множества элементов. Не последнюю роль в нем занимают элементы дизайна: иконки, логотипы, шрифты, фавиконы… В одних случаях лучше обратиться к дизайнерам за индивидуальными вариантами, однако в других вполне можно воспользоваться тем, что предлагает сеть. Ниже расскажу о площадках, где вы можете найти бесплатные составляющие для своего сайта, а именно иконки и логотипы.

Иконки

Captain Icon

https://mariodelvalle.github.io/CaptainIconWeb/

Здесь можно найти более 350 векторных иконок. Их можно легко масштабировать без потери качества. Форматы разные: eps, psd, png, svg, а также веб-шрифты и Sketch.

Иконки распространяются под лицензией CC BY-SA, то есть материалы можно использовать в личных и коммерческих проектах.

Ego

https://www.ego-icons.com/

На этом сайте есть 3600 иконок, но бесплатно можно скачать только 100 из них.

Если хотите использовать все из них, то придется заплатить 217 долларов. Форматы: Sketch, ai, svg, pdf, eps, iconjar.

Иконки представлены в синих и серых оттенках.

Endless Icons

http://www.endlessicons.com/

Здесь есть множество бесплатных черно-белых иконок. Помимо общего каталога, иконки можно выбрать по тематическим группам: fashion, food, shopping, social media и так далее. Есть еще разбивка по тегам.

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

Flaticon

https://www.flaticon.com/

Один из самых крупных сайтов с бесплатными иконками: здесь представлено больше миллиона векторных иконок. Бесплатно использовать их можно при условии, если вы укажете авторство. Если желания указывать нет, то вам нужно купить платную подписку. Она стоит 9,99 евро в месяц либо 89,99 евро за год (т.е. 7,50 евро в месяц).

Flaticon дает возможность редактировать свои иконки — перед загрузкой вы можете поменять их цвет. Это очень удобно, можно сделать иконки в цветовой палитре своего сайта.

Icofinder

https://www.iconfinder.com/

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

Логотипы и favicon

Небольшая справка: favicon — значок, который отображается рядом с названием сайта на вкладке в браузере. Также может отображаться в поисковой выдаче.

Logomakr

New Home page

Это конструктор, в котором вы можете создать собственный логотип. Работать в нем легко, инструментов немного, в целом он похож на сильно упрощенный Photoshop. Отлично подойдет для создания какого-нибудь простого логотипа или фавикона. Помимо основных фигур и текста, еще есть большой каталог с различными рисунками-иконками, которые можно использовать в своем логотипе.

Online Logomaker

https://ru.onlinelogomaker.com/

Это более продвинутый по функциям конструктор. Здесь можно добавлять разноцветные символы; большой выбор латинских шрифтов, но и для кириллицы есть несколько вариантов. Помимо логотипа, можно создать визитку.

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

Canva

https://www.canva.com/ru_ru/sozdat/logotip/

Известный в кругах дизайнеров и SMM-щиков проект, который часто используют для создания красивых изображений. Не все элементы бесплатны — часть из них можно купить отдельно либо приобрести подписку за 12,95 долларов в месяц. Но перед этим есть бесплатный 30-дневный тестовый период.

Designimo

https://www.designimo.com/

Здесь нужно просто ввести название своей компании (и слоган, если есть) — и онлайн-сервис автоматически сгенерирует несколько сотен возможных логотипов. Выбор разнообразен: есть абстрактные варианты, есть тематические — медицина, сфера красоты и ухода за собой, спорт, любовь, праздники… После выбора подходящего логотипа его можно доработать: изменить цвет и положение элементов, развернуть, сделать больше или меньше.

Плагины с иконками для Figma — Дизайн на vc.ru

{«id»:96725,»url»:»https:\/\/vc.ru\/design\/96725-plaginy-s-ikonkami-dlya-figma»,»title»:»\u041f\u043b\u0430\u0433\u0438\u043d\u044b \u0441 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438 \u0434\u043b\u044f Figma»,»services»:{«facebook»:{«url»:»https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/design\/96725-plaginy-s-ikonkami-dlya-figma»,»short_name»:»FB»,»title»:»Facebook»,»width»:600,»height»:450},»vkontakte»:{«url»:»https:\/\/vk.com\/share.php?url=https:\/\/vc.ru\/design\/96725-plaginy-s-ikonkami-dlya-figma&title=\u041f\u043b\u0430\u0433\u0438\u043d\u044b \u0441 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438 \u0434\u043b\u044f Figma»,»short_name»:»VK»,»title»:»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435″,»width»:600,»height»:450},»twitter»:{«url»:»https:\/\/twitter.com\/intent\/tweet?url=https:\/\/vc.ru\/design\/96725-plaginy-s-ikonkami-dlya-figma&text=\u041f\u043b\u0430\u0433\u0438\u043d\u044b \u0441 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438 \u0434\u043b\u044f Figma»,»short_name»:»TW»,»title»:»Twitter»,»width»:600,»height»:450},»telegram»:{«url»:»tg:\/\/msg_url?url=https:\/\/vc.

ru\/design\/96725-plaginy-s-ikonkami-dlya-figma&text=\u041f\u043b\u0430\u0433\u0438\u043d\u044b \u0441 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438 \u0434\u043b\u044f Figma»,»short_name»:»TG»,»title»:»Telegram»,»width»:600,»height»:450},»odnoklassniki»:{«url»:»http:\/\/connect.ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.ru\/design\/96725-plaginy-s-ikonkami-dlya-figma»,»short_name»:»OK»,»title»:»\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438″,»width»:600,»height»:450},»email»:{«url»:»mailto:?subject=\u041f\u043b\u0430\u0433\u0438\u043d\u044b \u0441 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438 \u0434\u043b\u044f Figma&body=https:\/\/vc.ru\/design\/96725-plaginy-s-ikonkami-dlya-figma»,»short_name»:»Email»,»title»:»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443″,»width»:600,»height»:450}},»isFavorited»:false}

23 361 просмотров

15+ сервисов для поиска иконок

Содержание:
1. Почему поиск иконок на сторонних сервисах – не всегда лучшая идея?
2.Сервисы с бесплатными иконками

3.Обзор сервисов с платными иконками

Создаете новый логотип для своей компании или личного бренда, и ищете свежие оригинальные иконки, которые могли бы стать его основой? Тогда позвольте нам облегчить ваши поиски, ведь в этой статье мы представляем подборку наиболее известных и востребованных сервисов для поиска иконок – как бесплатных, так и платных. Однако стоит помнить, что…

Почему поиск иконок на сторонних сервисах – не всегда лучшая идея?

Использование готовых иконок для оформления своего лого зачастую приводит к рискам, вот наиболее значимые из них, на которые стоит обратить внимание:

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

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

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

Сервисы с бесплатными иконками

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

1. Streamlineicons

Обширный каталог из 5000 разнообразных векторных иконок для сайтов, iOS и Android приложений. Они распределены по 97 тематическим категориям, пакет на 100 иконок можно скачать бесплатно, а за 2000 и 5000 иконок придется заплатить 67$ и 97$. StreamLine позволяет в один клик импортировать все доступные вам объекты в популярный органайзер IconJar для более удобного применения. Изображения предлагаются в двух стилях: со стандартным и жирным шрифтом, также вам удастся самостоятельно регулировать толщину их линий.

2. Iconstore

На сайте опубликовано более 220 паков цветных, контурных и символических изображений, скачать которые бесплатно и без регистрации может любой желающий. Каждый из них посвящен определенной тематике, возможно выбрать интересующую тему из списка категорий. Также паки снабжаются данными о количестве картинок и доступных форматах – большинство в SVG, но также встречаются EPS, AI, PSD, PNG. Система поиска позволит найти иконки по ключевым словам, а подписка поможет не пропустить свежие обновления.

3. Pixelicons

Доступно свыше 6500 изображений в трех стилях: цветном, контурном и выделенном жирным шрифтом. Все иконки можно скачать в самых разнообразных форматах, включая SVG, PNG, PSD, CSH, EPS, AI, PDF, WEB, SKETCH, а также мгновенно импортировать их в популярное тематическое приложение IconJar. 300 иконок предлагаются бесплатно, а за расширенный доступ придется заплатить 67$ или 97$. Все изображения разработаны с применением 16-пиксельной сеточной системы, еще пользователь может изменять их цвета, размеры, ориентацию, тени и штрихи.

4. Flaticon

Сервис предлагает клиентам обширную базу из 865 500 иконок, сгруппированных по 16 722 пакам. Здесь можно найти как бесплатные, так и премиум паки, все изображения загружены на сайт в наиболее актуальных форматах: SVG, PNG, PSD, Iconfont, EPS и BASE64. На главной странице FlatIcon размещаются популярные иконочные паки, например, за последний месяц или же за всё время. Есть возможность скачать иконки в векторном или растровом формате, в размере от 16px до 512px, а также придавать им разные цвета.

5. Iconfinder

Почти 2.5 миллиона иконок в формате SVG, как бесплатные, так и платные паки с определенным количеством изображений – каждый из них имеет свою цену, назначаемую разработчиком. Все объекты распределены по десяткам тематических категорий (всего их более 50), а также 12 стилям (от пиксельного и нарисованного от руки до мультипликационного и фотореалистичного). Платная подписка (за 19$ или 49$) дает доступ ко всем иконкам в разных форматах (SVG, IconJar, PNG) и позволяет использовать их в коммерческих целях.

6. Freepik

На этом сайте вы сможете бесплатно скачать не только иконки, но также векторы, иллюстрации, PSD файлы и стоковые фотографии, выбирая их среди десятков тематических разделов. Сейчас FreePik предлагает посетителям почти 100 000 бесплатных иконок, подходящих для личного или коммерческого применения и рассортированных более чем по 30 категориям. Их можно загружать в актуальных форматах PNG, SVG и EPS. Есть возможность отсортировать как самые популярные, так и только новые иконки.

7. Icons8

В каталоге вас ждет 69 900 иконок, доступных во всех популярных форматах (PNG, SVG, EPS, PDF) и различных размерах (48px, 96px, 480px и т. д.). Бесплатно предлагаются только иконки в PNG с предельным размером в 100х100px, за полный доступ к функционалу сайта придется платить 19.90$ в месяц. Все объекты тщательно распределены по тематикам, они соответствуют стандартам iOS, Android и Windows. Есть возможность перекрасить иконку в необходимый вам цвет, а также регулировать толщину ее линий.

8. Glyphish

Более 1600 иконок, разработанных в стиле Glyphish (версии 3, 4, 5, 6, 7, 8) и оптимально подходящих для любых iOS приложений. Пользователи могут скачать их в PNG (готовых к перемещению в Xcode), SVG, PDF, AI и PSD. 50 тестовых иконок доступны каждому желающему абсолютно бесплатно, а полный комплект изображений удастся приобрести за 99$. Иконки имеют широкие возможности для редактирования, полностью соответствуют официальным стандартам Apple и прекрасно отображаются на новейших дисплеях Retina.

9. Thenounproject

Администрация проекта обещает, что здесь вы найдете более миллиона оригинальных иконок, созданных дизайнерами со всего мира. Используя бесплатный аккаунт, вы будете вынуждены платить комиссию разработчику скачанной вами иконки. Платный аккаунт дает возможность использовать всю базу сайта за 9.99$ в месяц неограниченно без дополнительных расходов. Иконки доступны в форматах PNG и SVG, они подходят для целого ряда приложений от Apple, Google, Adobe, Microsoft, есть широкий выбор цветовых настроек.

10. Iconmonstr

В базе сервиса размещено свыше 4200 бесплатных иконок, рассортированных по 296 коллекциям. Пользователям доступны иконки в различных стилях: с жирными или тонкими линиями, пустыми или заполненными окружностями и рядом других дизайнерских вариаций. На сайте представлены различные форматы изображений, включая SVG, PNG, PSD и EPS, все они имеют небольшой вес, оптимально подходят для веб-сайтов и мобильных приложений. А встроенный генератор поможет вам с легкостью редактировать размеры, цвет и фон каждой иконки.

11. Futuramo

Здесь вы получите доступ к более чем 3000 векторных иконок, разработанных в 16 различных стилях. Каждый объект можно скачать в том или ином формате, включая PNG, SVG, SVG Icon Sheets для AI, SVG Sprites и Icon Webfonts. Все иконки идеально соответствуют 16-пиксельной сеточной системе, есть множество функций для изменения их расцветки, толщины линий и степени закругления углов. Также вы можете выбрать наиболее подходящую рамку из 24 доступных для каждого изображения.

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

Обзор сервисов с платными иконками

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

1. Creativemarket

Пользователям предлагается свыше 58 000 иконок в форматах SVG, PNG, JPG, PDF, PSD, EPS и AI, оптимально подходящих для оформления сайтов, соцсетей, инфографики и логотипов. На сайте можно найти иконки в различных стилях, (векторные, плоские, нарисованные от руки и т. д.) на те или иные тематики – от технологий до образования. Имеется удобная система поиска по ключевым словам, формату, цене и другим параметрам (самые свежие или популярные иконки и т.д.).

2. Iconsmind

На сайте размещено 2080 уникальных иконок, распределенных по 53 тематическим категориям в целом ряде форматов: SVG, EPS, AI, PSD, CSH, PNG и т.д. Объекты обладают высочайшим качеством, версия для iOS разработана с применением 30-пиксельной сеточной системы, а для Android – с 24-пиксельной. Полный доступ к базе со всеми возможными форматами обойдется в 79$, а за 59$ вы сможете скачивать иконки в EPS и AI. Есть широкие возможности для редактирования объектов, а лицензия IM позволяет без ограничений применять их в коммерческих целях.

3. Graphicriver

Посетителям этого онлайн супермаркета графики предлагается 17 500 иконок по цене от 2$ до 75$ за пак определенного объема. Например, за 75 долларов удастся приобрести комплект с 6150 объектами в 38 категориях. Вы сможете искать необходимые иконки по ряду критериев: тематике, цене, ключевым словам, рейтингу, новизне, количеству продаж и т.д. Каждый пак снабжен подробным описанием, превью иконок и перечнем доступных форматов (PSD, PNG, EPS, AI и т.д.), также можно выбрать тип лицензии.

4. Smashicons

На страницах сервиса доступно свыше 122 тысяч платных и бесплатных иконок, ежемесячно пополняемых новыми наименованиями. Вы легко сможете найти интересующий вас пак с иконками определенного стиля или тематики и скачать его за 19$ или же отдельную иконку всего за 1$. Выбрав платную подписку (за 50$/год или 149$ навсегда), вы получите полный доступ к возможностям сайта, включая все существующие форматы (JAR, SVG, AI, Sketch).

5. Pixellove

5000 высококачественных векторных иконок, идеально подходящих для различных iOS приложений. Объекты предлагаются в различных форматах: PDF, PNG, EOT, TTF, WOFF, а также AI, PSD и SKETCH (последние три, вместе с расширенной лицензией, доступны только для пакета iOS Infinity за 79$). Стандартный пакет, включающий все размещенные иконки, обойдется вам в 59$. Также есть возможность оплатить демо-доступ (1058 иконок) за 19 долларов.

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

Иконки услуг

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

Для мобильных устройств размер указан в реальных величинах. Для наилучшего отображения формат — SVG. Иконки кодируются цветом.

На этой странице изображена стандартная иконка, для всех услуг, у которых нет уникальной иконки

Проставление апостиля МВД на документ, вывозимый за границу

Регистрация брака

Регистрация рождения

Выдача сертификата на
материнский (семейный)
капитал

Распоряжение средствами
материнского (семейного)
капитала

Выдача архивных справок
МВД

Выдача или замена
паспорта гражданина РФ

Оформление
загранпаспорта
гражданина РФ

Регистрация по месту
жительства или
пребывания

Оформление
охотничьего билета

 

Штрафы ГИБДД

Регистрация транспортного
средства

Получение права науправление транспортным средством

 

 

Сертификат медицинского работника, получившего образование за рубежом

Признание иностранных документов об уровне образования или квалификации

Запись ребёнка в детский сад

 

 

Запись на прием к врачу

Информация об оказанных
медицинских услугах

Медико-социальная
экспертиза

 

 

Налоговая задолженность

Налоговый учет физических лиц

Узнай свой ИНН

Подача налоговой декларации

Предоставление сведений из ЕГРЮЛ

Оформление предпринимательской деятельности

Выдача или замена
паспорта гражданина РФ

Оформление
загранпаспорта
гражданина РФ

Регистрация по месту
жительства или

пребывания

Оформление
охотничьего билета

 

Получение сведений о состоянии индивидуального лицевого счета

Установление трудовой пенсии

Информирование граждан о предоставлении государственной социальной помощи в виде набора социальных услуг

Предоставление путёвки на санаторно-курортное лечение

 

Справка об отсутствии судимости

Выдача архивных справок МВД

Получение адресно-справочной информации в отношении физического лица

 

 

Регистрация прав на недвижимость

Оплата ЖКХ

Кадастровый учет

 

 

Оформление предпринимательской деятельности

Уведомление Роспотребнадзора о начале осуществления отдельных видов работ и услуг

Информирование плательщиков страховых взносов

 

 

Свидетельство о присвоении квалификации частного охранника

Консультация по трудовому законодательству

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

 

 

Получение охотничьего билета федерального образца

Получение информации из библиотечных фондов

Справка об угрозе безопасности туристов

 

 

Состояние атмосферного воздуха

Информация о недрах

Информация из государственного водного реестра

 

 

Присвоение радиочастот для радиоэлектронных средств гражданского назначения

Подача заявления о нарушении законодательства о рекламе

Тиражи печатных СМИ

Контроль качества сотовой связи

 

Иконки и заставки — Apache Cordova

В этом разделе показано, как настроить значок приложения и Факультативного заставка для различных платформ, как при работе в Cordova CLI (описанный в интерфейс командной строки) или с помощью средств SDK платформы (подробные руководства платформы).

Настройка значков в CLI

При работе в CLI, значок исходные файлы расположены в различные платформы-подкаталогов в рамках проекта www/res/icons каталог. Вновь созданный проекты приходят с набором по умолчанию иконки Cordova для вас заменить для платформ, которые вы хотите цели.

Андроид указывает иконки для низкого, среднего, высокого и сверхвысокого резолюций:

    android/icon-36-ldpi.png
    android/icon-48-mdpi.png
    android/icon-72-hdpi.png
    android/icon-96-xhdpi.png

Платформа iOS указывает 72 пикселя иконок для iPads и 57-пиксель иконки для iPhones и плеерах, с высоким разрешением 2 x варианты для сетчатки отображает:

    ios/icon-57-2x.png
    ios/icon-57.png
    ios/icon-72-2x.png
    ios/icon-72.png

Windows Phone указывает значок по умолчанию 48 пикселей, наряду с различных устройств фона плитки изображений, используемых при представлении приложения:

    windows-phone/icon-48. png
    windows-phone/icon-62-tile.png
    windows-phone/icon-173-tile.png

Ежевика требуется 80-пиксель значок:

Tizen требует 128-пиксель значок:

Настройка заставки в CLI

Используйте Splashscreen API для включения отображения приложения вступительной заставки на многих платформах. При работе в CLI, заставки экрана исходные файлы расположены в рамках проекта www/res/screens подкаталог.

Андроид указывает оба ориентированных на портрет и пейзаж заставки экрана изображения для низкого, среднего, высокого и сверхвысокого резолюций:

    android/screen-hdpi-landscape.png
    android/screen-hdpi-portrait.png
    android/screen-ldpi-landscape.png
    android/screen-ldpi-portrait.png
    android/screen-mdpi-landscape.png
    android/screen-mdpi-portrait.png
    android/screen-xhdpi-landscape.png
    android/screen-xhdpi-portrait.png

Платформа iOS указывает варианты для iPhone/iPod и iPad, с вариантами для retina дисплеев и различными ориентациями. 568 H файл настроен для iPhone 5 выше экрана:

    ios/screen-ipad-landscape-2x.png
    ios/screen-ipad-landscape.png
    ios/screen-ipad-portrait-2x.png
    ios/screen-ipad-portrait.png
    ios/screen-iphone-landscape-2x.png
    ios/screen-iphone-landscape.png
    ios/screen-iphone-portrait-2x.png
    ios/screen-iphone-portrait.png
    ios/screen-iphone-portrait-568h-2x.png

BlackBerry и Windows Phone указать один заставки экрана:

    blackberry/screen-225.png
    windows-phone/screen-portrait.jpg

В следующих разделах подробно Настройка заставки, когда работы с SDK и связанных с ними средств командной строки описаны в руководствах по платформе.

Экраны-заставки для платформы Android

Поместить файлы изображений 9-патч в Android-проекта res/drawable каталог. Размер для каждого должен быть:

• девочки (xhdpi): по крайней мере 960 × 720
• большой (hdpi): по крайней мере 640 × 480
• Средний (mdpi): по крайней мере 470 × 320
• малые (ldpi): по крайней мере 426 × 320

В config. xml , добавьте следующие настройки:

<preference name="splashscreen", "splash" />
<preference name="splashScreenDelay", 10000 />

Первая строка задает изображение для отображения в качестве экрана-заставки. Если имя изображения ничего не splash.png , вам необходимо изменить эту строку.

Вторая строка задает задержку в миллисекундах появляется как долго splashscreen. Чтобы закрыть экран-заставка после этого приложение получает [deviceready](../cordova/events/events.deviceready.html) событий, вызов navigator.splashscreen.hide() метод.

Экраны-заставки для платформы iOS

Скопируйте ваши изображения экрана заставки в iOS проект Resources/splash каталог. Добавьте только изображения для устройств, которые вы хотите поддерживать, такие как iPad или iPhone. Размер каждого изображения должны быть:

• Default-568h@2x~iphone.png (640×1136 pixels)
• Default-Landscape@2x~ipad. png (2048 x 1496 пикселей)
• Default-Landscape~ipad.png (1024×748 pixels)
• Default-Portrait@2x~ipad.png (1536×2008 pixels)
• Default-Portrait~ipad.png (768×1004 pixels)
• Default@2x~iphone.png (640×960 pixels)
• Default~iphone.png (320×480 pixels)

Экраны-заставки для платформы BlackBerry 10

Скопируйте ваши изображения экрана заставки в проект res/screen/blackberry10 каталог. Имена файлов должны быть:

• splash-1280×768.png (1280×768 pixels)
• splash-720×720.png (720×720 pixels)
• splash-768×1280.png (768×1280 pixels)

Bootstrap 3 — Иконки Glyphicons

В этой статье рассмотрим набор шрифтовых иконок, включённых в сборку Bootstrap 3.4.1 по умолчанию. Это набор включает более 250 иконок в формате шрифта из пакета Glyphicon Halflings.

Иконки Glyphicons

Фреймворк Bootstrap 3 включает в себя более 250 иконок в формате шрифта из набора Glyphicons Halflings. Библиотека Glyphicons Halflings не является бесплатной. Но разработчики этих иконок сделали некоторую часть из них доступной для использования в Bootstrap 3.

Четвёртая версия Bootstrap не включает никакие наборы иконок в формате шрифта в свою стандартную поставку. Если они вам нужны, то их придётся подключать самостоятельно.

Стандартные иконки Bootstrap 3 (из набора Glyphicon Halflings)

Как подключить иконки Glyphicons Halflings?

В стандартной сборке Bootstrap 3 иконки Glyphicons Halflings подключать не надо. Они и так уже подключены в файле CSS (bootstrap.css или bootstrap.min.css).

Находятся иконки Glyphicons Halflings в каталоге fonts. В данной директории находятся несколько форматов (eot, svg, ttf, woff, woff2) одних и тех же иконок.

Формат eot необходим для отображения иконок в старых браузерах Microsoft Internet Explorer (до 9 версии). Шрифт в формате ttf используется для отображения иконок в устаревших браузерах операционной системы Android (до версии 4.4). woff и woff2 – это форматы, которые используют все основные браузеры. Вторая версия формата шрифта (woff2) отличается от первой тем, что она имеет меньший размер. В настоящее время woff2 поддерживается браузерами Chrome 36+, Opera 26+, Firefox 35+. Шрифт в формате svg поддерживается только браузерами Safari (4.1 и ниже), работающими под управлением операционной системы iOS.

По умолчанию шрифты Glyphicons Halflings должны быть расположены относительно файла bootstrap.css или bootstrap.min.css следующим образом:

bootstrap.css -> родительский каталог -> папка fonts -> шрифты

Если иконки Bootstrap отображаются у вас на странице квадратиками, то проверьте, правильно ли у вас расположены шрифты, относительно файла bootstrap.css по вышеприведённой схеме.

Как использовать стандартные иконки в Bootstrap 3?

Добавление иконки Bootstrap на веб-страницу обычно осуществляется с помощью элемента span или i, к которому необходимо добавить базовый класс glyphicon и класс определённой иконки (например, иконки телефона — glyphicon-earphone).

<!-- Глификонка телефона -->
<!-- 1. С помощью элемента span -->
<span aria-hidden="true"></span>
<!-- 2. С помощью элемента i -->
<i aria-hidden="true"></i>

Иконка телефона из набора Glyphicon Halflings

Галерея иконок Bootstrap 3

Стилизация иконок в Bootstrap 3

Оформление иконок Glyphicons Halflings осуществляется также как и стилизация обычного текста.

Например, для того чтобы изменить цвет иконки, ей необходимо просто задать CSS-свойство color.

<!-- Иконка "Стрелочка влево" (glyphicon-arrow-left) -->
<!-- Например, с помощью атрибута style -->
<i aria-hidden="true"></i>
<!-- Например, с помощью класса (например, glyphicon-green) -->
<style>
/* CSS */
. glyphicon-green {
  color: green;
}
</style>
<i aria-hidden="true"></i>

Изменение размера иконки Glyphicon осуществляется с помощью CSS свойства font-size:

<!-- Например, увеличим размер иконки -->
<i></i>

Добавление иконок Bootstrap к HTML-элементам

Помещение иконки «Звездочка» в кнопку выполняется следующим образом:

<!-- Разделение иконки и текста с помощью пробела -->
<button type="button">
  <span></span> Избранное
</button>
<!-- Разделение иконки и текста с помощью   -->
<button type="button">
  <span></span> Избранное
</button>

Скриншот примера:

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

Использование иконки Bootstrap в качестве маркера списка ul.

Чтобы это осуществить необходимо:

1. добавить класс icon к элементу ul;
2. вставить на страницу фрагмент CSS кода.

<style>
/* CSS */
ul.icon {
  /* список без стандартного маркера */
  list-style-type: none;
}
ul.icon li {
  /* отступ слева */
  text-indent: 0px;
}
ul.icon li:before {
  /* шрифт */
  font-family: 'Glyphicons Halflings';
  /* код иконки */
  content: "\e127";
  /* расположение блока с иконкой */
  float: left;
  /* ширина блока */
  width: 35px;
}
</style>
  
<!-- Маркированный список ul -->
<ul>
  <li>Содержимое 1 пункта</li>
  <li>Содержимое 2 пункта</li>
  <li>Содержимое 3 пункта</li>
</ul>

Пример, как иконку можно поместить в элемент input:

<style>
/* CSS */
. input-icon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: block;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  pointer-events: none;
  top: 25px;
}
.form-icon {
  position: relative;
}
.form-icon input {
  padding-left: 42.5px;
}
</style>
  
<!-- HTML -->
<div>
  <label for="name-user">Имя пользователя:</label>
  <input>
  <i aria-hidden="true"></i>
</div>

Как подключить иконки Glyphicons к Bootstrap 4?

В Bootstrap 4 нет встроенных шрифтовых иконок. Если хотите в Bootstrap 4 использовать шрифтовые иконки Glyphicons, которые были в Bootstrap 3, то это можно сделать следующим образом.

Во-первых, загрузите папку «fonts» из Bootstrap 3 в Bootstrap 4. Скачать архив Bootstrap 3 можно используя эту ссылку.

Во-вторых, создайте файл, например, «font-glyphicons. css» и поместите в него следующее содержимое. Данные стили нужны для того, чтобы иконки можно было более просто и удобно вставлять на страницу.

В-третьих, подключить файл «font-glyphicons.css» к странице с помощью тега link.

<link rel="stylesheet" href="css/font-glyphicons.css">

После этого использовать иконки Glyphicons в Bootstrap 4 можно будет также как и в Bootstrap 3:

<span></span>

Рисуем иконки

Ох уж эти иконки, с ними всегда куча проблем. То рисовать долго, то просто не получается, а при скачивании сложно найти набор нужных иконок в одном стиле и вообще в целом подходящие. «Что мне делать?»

1-ое правило — Иконки должны отражать суть. Если ваша иконка не помогает понять смысл, то она вообще не нужна. Поэтому если это поле поиска, то подходит лупа. Вы можете креативить и размещать на месте лупы собак ищеек, но на вашем интерфейсе это отразится плохо. Пользователю ваша логика не очевидна. Дизайн должен быть простым и понятным всем. Поэтому старайтесь не искать сложные пути, а мыслить проще.

2-ое правило — Иконки должны быть в одном стиле. Если вы выбрали однопиксельный контур, значит все иконки должны быть такими. Это сделает ваш дизайн более стильным и упрощенным. «Красота — это повтор. Красота — это когда есть ровный, предсказуемый ритм.»

Если глаз замылился и вы уже не можете отличить хорошо у вас получилось или нет, дайте себе день на отдых (займитесь другими рабочими моментами), а после посмотрите на свой дизайн и спросите «хочу ли я с ним взаимодействовать?»

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

На картинке первые созданные иконки. Как вы можете заметить они особенно не изменились. Сегодня мы сделали их более утонченными, для того чтобы они не выглядели такими яростными. Но в 1981 году выбора не было, нужно как то выделять иконки на таком шумящем фоне, к тому же госпожа Графика, была не на том уровне, так что простительно.

Почему кроме небольших стилистических изменений всё осталось как раньше? Пользователь уже получил опыт именно с этими иконками, они понятны и мгновенно распознаются. Вы привыкли, что яблоко круглое, если вам дадут квадратное, то первой реакцией будет сомнение «что это?».

Все циклично, особенно мода. Вы можете это увидеть на примере иконок 1985. Стиль которым мы так любим и сейчас. Дизайн «8бит».

darknet.lenta.ru

Пример сайта в стиле 8 БИТ

Минусы очевидны, неудобно, не красиво, агрессивно, рваные углы, ощущение беспокойства.

Плюсы — настолько сильно влияет на запоминаемость, что можно поступиться всем остальным, т.к кол-во контента ограничено, и большие тексты пользователю читать не придется. Так же найдется процент пользователей, которым наоборот будет комфортно с такой подачей (это я про себя, ибо достали глянцевые подачи, как на счет треша).

Сейчас модно, но рисовать довольно энергозатратно, если есть желание создать тематический сайт и вложить большое количество сил на отрисовку всех элементов, то вариант прикольный.

В общем все эти пиксельные времена длились довольно долго, настолько долго, что мы сейчас даже видим в них что-то красивое. Благо настали 2000-е.

Первое что бросается в глаза, это много-много градиентов и цветов, все такое объемное. В общем хотите сделать не крутые и устаревшие иконки нагромождайте их цветами и объемами, 2000-е оценят.

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

К чему мы пришли? Обратимся к Apple:

Итак, иконки очень простые и понятные. Нарисовать такие под силу и начинающему дизайнеру. Они в очень сдержанном стиле и соблюдают заданную толщину. Вы это заметили потому что и один ipad в иконке и четыре обладают одинаковой толщиной линий. Иконки не тонкие, хорошо читаются.

Пропорции гаджетов соответствуют реальности. Это важно не только для иконок , но и для любого графического элемента. Соблюдение реальных пропорций по отношению друг к другу — это правильно.

Чтобы нарисовать такие иконки достаточно стилизовать реальные гаджеты.

Google придерживается другого стиля. При этом иконки простые, это определенно минимализм. Цвета далеки от ядовитых, ближе к спокойным, несмотря на высокую цветность. Нет градиентов — плоский дизайн. Каждая иконка похожа на мини-лого. Выглядит чудно.

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

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

Рисуйте иконки в большом размере и векторные, чтобы они не теряли качество в будущем.

Опубликовано: 2017-12-19

Размеры конвертов — каталог и буклет | Универсальная печать

Разница между конвертами для каталогов и конвертами для буклетов заключается в том, что конверты для каталогов открываются с короткой стороны, а конверты с буклетами открываются по длинной стороне.
Номер		Конверт Размеры		Рекомендуемые размеры корпуса *
3 Буклет		6 1 /4 2 4		6 x 4 1 / 2
5 Буклет		8 1 / 8 x 5 1 / 2		7 5 / 8 x 5 1 / 4
6 Буклет		8 7 / 8 x 5 3 / 4		8 3 / 8 x 5 1 / 2
6 1 / 2 9 0035 Буклет (Каталог № 1)		9 x 6		8 1 / 2 x 5 3 / 4
6 3 / 4 Буклет (№ 1 1 / 2 Каталог)		9 1 / 2 x 6 1 / 2		9 x 6 1 / 4
7 1 / 4 Буклет (№ 3 Каталог)		10 x 7		9 1 / 2 x 6 3 / 4
7 1 / 2 Буклет (# 6 Каталог)		10 1 / 2 x 7 1 / 2		10 x 7 1 / 4
# 9 3 / 4 Каталог		11 1 / 4 x 8 3 / 4		11 x 8 1 / 2
9 Буклет		11 1 / 2 x 8 3 / 4		11 x 8 1 / 2
9 1 / 2 Буклет (# 10 1 / 2 Каталог)		12 x 9		11 1 / 2 x 8 3 / 4
# 12 1 / 2 Каталог		12 1 / 2 x 9 1 / 2		12 x 9 90 032 1 / 4
10 Буклет		12 5 / 8 x 9 1 / 2		12 1 / 8 x 9 1 / 4
13 Буклет (# 13 1 / 2 Каталог)		13 x 10		12 1 / 2 x 9 3 / 4
# 14 1 / 2 Каталог		14 1 / 2 x 11 1 / 2		14 x 11 1 / 4
# 15 Каталог		15 x 10		14 1 / 2 x 9 3 / 4
# 15 1 / 2 Каталог		15 1 / 2 x 12		15 x 11 3 / 4

Значки приложений в Xamarin.

iOS — Xamarin

• 22.05.2017
• 4 минуты на чтение

В этой статье

Подробно будут рассмотрены следующие темы:

Значки приложений, внимания и настроек

Точно так же, как приложение Xamarin.iOS может использовать ресурсы изображений для элементов управления пользовательского интерфейса и в качестве значков документов, ресурсы изображений могут использоваться для предоставления значков приложения.На следующих снимках экрана iPad показаны три использования значков в iOS:

• Значок приложения — Каждое приложение iOS должно определять значок приложения. Это значок, который пользователь будет нажимать на главном экране iOS, чтобы запустить приложение. Кроме того, этот значок используется Game Center, если применимо. Пример:

• Значок Spotlight — этот значок отображается всякий раз, когда пользователь вводит имя приложения в поиске Spotlight.Пример:

• Значок настроек — если пользователь входит в приложение Settings на своем устройстве iOS, этот значок будет отображаться в конце списка Settings для приложения. Пример:

Для поддержки всех типов значков, требуемых приложением Xamarin.iOS, нацеленным на iOS 5 — iOS 9 (или выше), потребуются следующие размеры и разрешения изображений:

Размер значка iPhone

Размер значка iPad

• iPad: iOS 9 и 10

  Значок	2x (iPad Pro)
  Значок приложения	167×167 6
  Прожектор	120×120 6
  Настройки	58×58 5

• iPad: iOS 7 и 8

  Значок	1x	2x
  Значок приложения	76×76	152×152
  Прожектор	40×40	80×80
  Настройки	–	–

• iPad: iOS 5 и 6

  Значок	1x	2x
  Значок приложения	72×72	144×144
  Прожектор	50×50	100×100
  Настройки	29×29 3, 5	58×58 3, 5

1. Visual Studio для Mac и Xcode больше не поддерживают установку изображения 1x для iOS 7.
2. Установка изображения 1x для iOS 7 не поддерживается при использовании каталогов активов.
3. iOS 7 и 8 используют те же размеры изображений, что и iOS 5 и 6.
4. Использует те же изображения и размеры, что и значок Spotlight.
5. Использует значки того же размера, что и iPhone.
6. Поддерживается только с наборами изображений каталога активов.

Дополнительную информацию о значках см. В документации Apple по размерам значков и изображений.

Управление значками с помощью каталогов активов

Для значков в ресурсы можно добавить специальный набор изображений AppIcon .xcassets в проекте приложения. Все версии изображения, необходимые для поддержки всех разрешений, включены в xcasset и сгруппированы вместе. Специальный редактор в Visual Studio для Mac позволяет разработчику включать и настраивать эти изображения графически.

Чтобы использовать каталог активов, выполните следующие действия:

1. Дважды щелкните файл Info. plist в обозревателе решений , чтобы открыть его для редактирования.

2. Прокрутите вниз до раздела iPhone Icons .

3. Нажмите кнопку Migrate to Asset Catalog :

4. В обозревателе решений дважды щелкните файл Assets.xcassets , чтобы открыть его для редактирования:

5. Выберите AppIcon из списка ресурсов, чтобы отобразить редактор значков :

6. Либо щелкните значок данного типа и выберите файл изображения требуемого типа / размера, либо перетащите изображение из папки и отпустите его до нужного размера.

7. Нажмите кнопку Открыть , чтобы включить изображение в проект и установить его в xcasset.

8. Повторите для всех необходимых изображений.

1. Дважды щелкните ** Info. ** файл в обозревателе решений :

2. Щелкните вкладку Visual Assets и нажмите кнопку Use Asset Catalog под значками приложений :

   Если кнопки нет, а есть раскрывающийся список, значит, в этот проект уже добавлен каталог активов.

3. В обозревателе решений разверните папку Asset Catalog :

4. Дважды щелкните файл Media , чтобы открыть его в редакторе:

5. В Properties Explorer разработчик может выбрать различные типы и размеры необходимых значков.

6. Щелкните значок данного типа и выберите файл изображения требуемого типа / размера.

7. Нажмите кнопку Открыть , чтобы включить изображение в проект и установить его в xcasset.

8. Повторите для всех необходимых изображений.

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

iTunes Artwork

При использовании метода Ad-Hoc доставки приложения (для корпоративных пользователей или для бета-тестирования на реальных устройствах) разработчик также должен включить изображения размером 512×512 и 1024×1024, которые будут использоваться для представления приложения в iTunes.

Чтобы указать обложку iTunes, выполните следующие действия:

1. Дважды щелкните файл Info.plist в обозревателе решений , чтобы открыть его для редактирования.

2. Прокрутите до раздела iTunes Artwork редактора:

3. Для любого отсутствующего изображения щелкните миниатюру в редакторе, выберите файл изображения для нужной иллюстрации iTunes в диалоговом окне «Открыть файл» и нажмите кнопку OK .

4. Повторяйте этот шаг, пока для приложения не будут указаны все необходимые изображения.

1. Дважды щелкните файл Info.plist в обозревателе решений , чтобы открыть его для редактирования.

2. Щелкните вкладку Visual Assets и разверните обложку iTunes :

3. Для любого отсутствующего изображения щелкните миниатюру в редакторе, выберите файл изображения для нужной иллюстрации iTunes в диалоговом окне «Открыть файл» и нажмите кнопку Открыть .

4. Повторяйте этот шаг, пока для приложения не будут указаны все необходимые изображения.

ICON Health & Fitness, Inc.

Мы помогаем людям жить своей лучшей и здоровой жизнью

Истоки

В 1977 году двое одноклассников сидели за кухонным столом в том самом доме, который изображен выше. зарисовка бизнес-идей на салфетке.Предприниматели начали с небольшого импорта бизнес по продаже различных товаров, в том числе дровяных печей и часов. Раннее обнаружение тенденции фитнеса и бега, основатели ICON переключили свое внимание на новые возможности в этих новых отраслях. В 1980-х годах ICON представила беговые дорожки, которые складывались для хранения. Результат был SpaceSaver ™ — инновация ICON, которая позволяет потребителям «вписать фитнес в дом» и вызвало рост в категории домашнего фитнеса.Этот ранний пример демонстрирует синергию дизайна, разработки и производства ICON. знания. Спустя десятилетия последовало еще много простых, но блестящих улучшений. позволяя ICON руководить инновациями. Сегодня ведущие бренды ICON, включая NordicTrack и ProForm, занимают первые места в рейтинге оборудование в каждой из трех крупнейших категорий отрасли — беговые дорожки, стационарные велосипеды и эллиптические тренажеры.Инновации с брендом iFit в носимых устройствах и в Интернете Фитнес-решения поддерживают мотивацию и информированность потребителей. Наша марка обуви Altra одежда для фитнеса, шоссейного бега и трейлраннинга расширяет предложения ICON для фитнеса и здоровый образ жизни.

Логан Лайф

Основатели ICON сохранили штаб-квартиру в том же городе, где все началось: Логан, штат Юта, расположен в красивой долине Кэш. Это просто. Этот великолепный город на севере штата Юта находится прямо посреди удивительных катание на лыжах, рыбалка, охота, катание на горных велосипедах, скалолазание, походы и многое другое на открытом воздухе деятельность. Логан находится всего в нескольких часах езды от шести национальных парков. Старая пословица слова «Играй, где работаешь, работай, где играешь», легко описывает жизнь здесь, в долине. Логан может похвастаться невысокой стоимостью жизни, минимальным трафиком и временем в пути, легким доступом к Международный аэропорт Солт-Лейк-Сити был признан одним из самых безопасных городов в Соединенные Штаты, чтобы жить.Cache Valley также имеет одно из лучших образований в страна, начиная с Pre-K и заканчивая местным университетом, Университет штата Юта — ВСТРЕЧАЙСЯ!

.