Pull to refresh

Comments 105

Я сначала даже подумал "ух ты, иконки генерируются на ходу по текстовому описанию! До чего техника нейронные сети дошли!" К сожалению, реальность оказалась прозаичнее — список иконок хоть и велик, но конечен, поэтому /alien-drinking-cola или /dog-on-ufo работать не будут. Вернее, они работают, но выдают какую-то чушь.

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


Видим, что она нашла соответствия всем пяти иконкам.


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

Это очень интеллектуальный, кропотливый процесс. Вот примеры из нашего слек-канала:


Тут приходится разбираться, что это такое, и убирать ненужные ассоциации


Упрощаем иконку

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

Да я понимаю, это был внезапный порыв "неужели все-таки?.." Инопланетянина с колой не надо, это пример абсолютно из головы — хотелось посмотреть на сгенерированный результат и повосхищаться :)

Что-то на айфоне не рисуется
Вообще, на айфоне работало. Даже под ретину специально код правили. Щас у супруги отберу телефон — потестю.

Что-то то ли я криво рисую, то ли оно не хочет со мной дружить

Наверное, оно ещё не научилось дружить. Но изо всех сил старается научится понимать наши художества image

Вы на странице Search рисуете? Где поиск отображается?
Поделитесь, что рисуете image

Вот, что я рисую. Но беда в том, что я знаю какие иконки рисовать
image

Ну и база иконок, пока у НН не все наши 50к иконок
А потом сервис умрет, и все иконки… ну вы поняли.
Настоящие веб-мастера все яйца держат в одной корзине.
Вы правы. Мы с 2012 года существуем, развиваемся, и все это время раздаем иконки через CDN — такая функция есть в нашем веб-приложении.



Но все же! Так что если кто-то хочет написать webpack или gulp плагин для скачивания иконок и замены урлов на локальные, мы будем очень, очень благодарны.

Неплохо было-бы выдавать запакованные наборы иконок в разных форматах — тогда можно было-бы обойтись лишь одним запросом. Или вообще без запросов — хранить копию в public/ сайта/приложения, не на серверах icon8.

Согласен. Я так же делаю. Иногда только jquery беру с CDN и то когда очень лень подключать пакет.

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

Ну и бывают ситуации, когда совсем быстро нужно пофиксить фронт, а в руках только смартфон и связь через ж тонкий канал (постоянно слышу такие истории, причём с заслуженными нотками гордости). Зашёл в редактирование страничкой, тык тык и ещё одна геройская история готова image
3 года прошло — не умерли и все цветет пуще прежнего. Следующий чекин — через 5 лет )
Надо было бы 8 мая написать, было бы 4 года. Встретимся через 5 лет. Может сделаем традицию писать сюда каждые 5 лет? ) а еще лучше на ваш сайт, вдруг что с хабром случится.
Если иконка не нашлась, рисуйте ее скорее! Начиная с наиболее частых упоминаний некоего слова в запросах.
Есть такое — 5 лет рисуем каждый день.

Но и статистику по поискам, после которых люди ничего не скачивают, просмотриваем регулярно. Там, правда, больше недостающие теги выявляются, то есть иконка есть, а нужного тега-синонима — нет.
Кажется это опечатка, либо я плохо ассоциирую
Ещё добавить к поиску «Возможно вы имели ввиду...» + Спеллчекер в поиск
Запрос «Сеткак» — ничего не находит. Спеллчекер исправил бы на «Сетка»
Запросы «Оловянный» и «Оловяный» показывают одно и тоже, и это хорошо, но не бьёт по рукам (не исправляет на странице)
Народ, спасибо, но это не поиск! Поиск — в веб аппе (там и спеллчекер есть) и приложениях.

Мой косяк в том, что это не следует из статьи и страницы. Надо бы как-то их поменять.
А между прочим хорошая идея — снимать метрики с внутреннего поиска и рисовать то, что не удалось найти. Даже без регистрацию идей через request-icon.
Проблема в том, что сейчас могут искать на 8ми языках, а также с опечатками и по неполным фразам. Нужен ещё один AI чтобы понять, что пользователь предполагал найти :)
https://png.icons8.com/zombie-in-fire

Не шработало.(
Что-то я в затруднении. Почему она сработать-то должна была? Такой иконки нет
Да понятно, что нет. Но хотелось, чтобы была… Первым комментарием о завышенных ожиданиях написано, я тоже хотел слишком многого.
А нашлось-то вообще непонятно что. Как «зомби» и «огонь» связаны с оплатой кредиткой? Или…
image
Спасибо за тест кейс, тем более что есть и зобми, и огонь. Посмотрим.

Для практического использования: ребята, все же лучше писать название иконок, которые есть в веб-аппе или скачать десктопную тулзу (она хорошая).
Пользуюсь иконками icons8 в своём приложении, Разумеется с обратной ссылкой и с сайта и из самого приложения.
Воспользуюсь случаем и передаю Вам лично и всем разработчикам большое спасибо за удобный сайт и лояльную лицензию.
Заскриншотил и зашарил в общем канале — большое спасибо! Тронуты.
Тронуты
Спасибо за пример! Будем улучшать поиск
UFO just landed and posted this here
Да, а то на боевом сайте делать 200 запросов всех иконок — это плохая практика.
А сеты от определенного количества иконок/запросов наверное можно даже монетизировать.
ой, $20 в месяц за использование сетов иконок? Нет, спасибо. Видимо я далек от ЦА сервиса.
Сеты — если иметь ввиду наборы иконок, то можно бесплатно, как и вообще весь функционал.

Если иметь ввиду SVG sets (формат), тогда да, он платный.

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

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

Вот тут подробнее
https://png.icons8.com/pet — ожидал увидеть кота или собаку. У вас какая-то канистра. У pussy тоже какая-то ветка с листочками, а я хотел кошечку.

Подозреваю, что pet — это либо petrol, либо PET. Классификатор надо допиливать.

pet — отличный пример. Pet — потому что petrol, алгоритм его выше кошек и собак отранжировал, а зря.
pussy — потому что pussy willow. Для кошечки нужно cat (ну и вагина тоже так называется, тоже есть).

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

Одновременно, для практического использования все же лучше искать на сайте и вписывать название.
Т.е. вы сейчас настроете алгоритм, и он вместо pet будет все-же выдавать кошку. Но это значит, что через какое-то время на pussy будете выдавать вагины, вместо кошек и тогда бедному вебмастеру полетят камни, типа какого хера вагины появились на детском сайте про кошечек…
Я это к тому, что у меня например мало причин доверять отрисовку картинок динамическому генератору, который сегодня выдает одно, а завтра другие и никто не знает как это произойдёт.
Pet — это всё-таки немного абстрактное понятие. Может кошечка, может собачка, а может покемон.
Надеюсь, кто будет пользоватся сервисом, будет писать конкретное cat.
Когда входные данные недетерминированны — выходные данные тоже могут быть необычные. Иногда это довольно приколько — например генерация рисунков нейросетями.

Закончить мысль хотелось бы чужим комментарием:
Не стоит вводить в Интернете «pussy», если хотите увидеть кошечку.
Если с pet — всё понятно, то с pussy у меня две ассоциации — вторая это небезизвестные

image
Спасибо, хороший пример! Взял в работу!
У pussy тоже какая-то ветка с листочками, а я хотел кошечку.

Не стоит вводить в Интернете «pussy», если хотите увидеть кошечку.
Хахах, комментарий дня!
Мне он в цветном варианте нравится:

image
У нас этой иконке посвящена целая статья (на английском правда)

Тут, всё просто, за время президества обоих лидеров ни кому не понадобились такие иконки. Данное упущение всегда можно наверстать)
Трампа вот нарисовали же)

Так как иконок нет, то сервис по идее должен вернуть, что то относящееся к этому слову.
Например: по такому запросу http://png.icons8.com/obama/color прилетает image
, а по такому запросу: http://png.icons8.com/putin/color генерируется иконка image

Но ведь пользователь, не это ожидает увидеть. Думаю, что всётаки это немного специфичные иконки, которые без сомнения могут понадобиться, но их время ещё не наступило)

Задача, сервиса, думается — быстро предоставить стандартные иконки, которых довольно много.
Не удержался, создал запрос на создание иконки. Буду рад лайку — чтобы иконку побыстрей нарисовали…
Кто мне ответит Обамой?

Пытаюсь поставить вашему запросу дизлайк — к сожалению, выводит Vote not found. Это баг?

Неа, не баг image
Downvote — это отмена своего голоса 'за'. Но соглашусь — это не очевидно.

Даже не знаю, что Вам посоветовать в такой ситуации…

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

Да, нелогично :) Мне кажется, что с точки зрения правильности построения UI у пользователя в принципе не должно быть возможности совершать действия, которые невалидны в текущем состоянии. Поэтому, наверное, было бы разумнее оставить только кнопку "Vote", которая менялась бы на что-то типа "Cancel vote" серого цвета, и отменяла бы голос при повторном нажатии. Таким образом, пользователь будет всегда в одном из состояний ("голосовал", "не голосовал"), и не будет путаницы.

Добавил ваш коммент в список ошибок и непоняток, после праздников коллективно подумаем как с помощью него улучшить UX.

Кстати Ваш дизлайк я учёл, убрав свой голос image

О, и пока мы все еще говорим об этом — у вас опечатка, "Downote" вместо "Downvote". Возможно, если эта ссылка исчезнет, то это и не проблема?


Не стоило убирать голос — это несправедливо по отношению к тем, кому эта иконка нужна (в том числе вам) :)

Спасибо, это уже баг, второй ваш коммент добавил к нам)

А на счёт голоса — по моему довольно здорово получилось. Этакий элегантный выход из несовсем обычной ситуации.

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

Отличное решение. Либо сделать Upvote залипающей. Большое спасибо.
UFO just landed and posted this here
UFO just landed and posted this here
а по какому вы слову иконку искали?
UFO just landed and posted this here
Ахах, кто-то ночью переводил видимо image
Пальцы по клавишам не попадали.

Вы бы ещё видели автопереводы, там вообще свет туши
Немного не в тему — на днях заметил, что студия настолько поддерживает юникод, что эмодзи можно прям в код вставлять и прямо в коде она их отрисовывает. Проверял на 2017.
Была недавно тема на Хабре полушуточная, мол давайте переменные называть как символы смайликов. Основной аргумент против был — в vim'e (или других простейших но подручных редакторах) такие Юникоды могут не отразиться, что встанет в большую проблему, когда надо срочно что-то исправить.

Так и не понял, как вставить SVG иконку.

Этот сервис выдаёт, только PNG. Сервис-клон для SVG мы подготавливаем в данный момент.
Сейчас вы можете взять SVG тут: https://ru.icons8.com/web-app/category/all/Very-Basic

На выбор, аж три способа быстрой вставки SVG в HTML
image
Много неожиданностей. На FreeBSD — иконка FireFox'a, на OpenBSD — мусорное ведро, а яндекс:

image
да, за OpenBSD — прям обидно как-то стало
UFO just landed and posted this here
Вообще, тут два подхода:
1. Стилизовать
2. Скалить (т.е. уменьшать большие лого)

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


iOS и Windows 8 гораздо ближе к оригиналу.
UFO just landed and posted this here
UFO just landed and posted this here
Нас не бьет, и много кого тоже: темы всякие отлично подлетают: там ссылка по умолчанию стоит. Сам WordPress.org набрал аж DA 93 именно таким способом.

Вообще, нельзя накручивать ссылочную массу. Но авторство-то можно указывать: статья такого-то журналиста, фотография того-то фотографа, иконки такого-то дизайнера. То есть это как бы органический рост.
Чтобы лучше угадывать, что же хотел веб-дизайнер, попробуйте прикрутить word2vec. Тогда хотя бы на pet будет собачка/кошечка, и что-то более серьёзное, чем письмо для videogame.
Второй уровень сложности — прогнать word2vec ещё и нейронками по картинкам в интернете с прикартиночными текстами, а потом по вашим иконкам. Тогда, возможно, word2vec дообучится до того, что сможет из ваших иконок подбирать что-то на замену тому, что нашлось в интернете для термина от пользователя.
Здорово, что вы написали про эту технологию.
Мы ведь идём к ней довольно быстро. Мы не раз уже обсуждали необходимость построения графа. Где слова будут вершинами, а ребра — отношения между слов, при этом блина ребра — будет соотвествовать дистанции (distance) между словами. Думается, это библиотека сделает за нас 90% необходимого. Спасибо!
Спасибо. Вроде бы все поправил:

Бесят меня такие «бесплатно». Разве «поставить ссылку» на ваш сервис — это не плата?
Я все понимаю — вы сделали работу и хотите за нее оплату — это ваше право. Но не надо врать про «бесплатно».
Понимаю ваше негодование. Совсем «бесплатные-бесплатные» мы тоже делаем:
https://icons8.com/line-awesome
https://icons8.com/c/flat-color-icons/
https://icons8.com/c/animated-icons

Мы их релизим под лицензией Good Boy, которую сами придумали: делай все, что одобрит мама.

Вот тут подборка самых популярных и вот тут та же подборка с нашим веб аппом.

Но есть и более сложный вопрос. Где проходит граница между платным и бесплатным?
  • Хабр, Gmail и rutracker крутят рекламу — они бесплатные?
  • Те, кто статистику собираеют и продают?
  • BSD License, которая требует указывать авторов?


Какие именно монетизация и упоминание авторства — еще бесплатные, а какие — уже платные?
А какую статистику вы собираете и куда продаёте?
Ну вот фамилию вашей кошки, например :)

Наша статистика — это поиски и скачивания. По ней смотрим, каких иконок не хватает, и рисуем. Вот панель статистики, которую видят дизайнеры:



Собирать и продавать статистику — это удел всяких счетчиков, шарилок итд.
Ну, формально это не плата, а просьба соблюдать лицензию Creative Commons Attribution-NoDerivs 3.0 Unported и указывать автора творческой работы. Но часть продуктов есть под MIT, мы их на github выложили.
Отличный проект!
Из пожеланий — хотелось бы иметь возможность использовать помимо кода для цвета, так же названия из CSS (red, blue, aqua и т.д.)
Спасибо!
Да, такая фича есть в беклоге сервиса. Обязательно сделаем image

Ещё в планах сделать указание размера 2х, 3х и т. д… от базового размера стиля — чтобы выдерживать pixel perfect и недопускать размытия краёв.

По первым дням использования сервиса видно, что ещё нужно сделать код цвет тремя символами — ведь написать fff, быстрее чем ffffff.

Ещё к нам прилетают запросы размера 32х32 — и хоть у нас так и так все иконки квадратные, но раз пользователи интуитивно набирают такое обозначение размера, то думаю стоит и его учитывать.

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

Убил баннер на странице с иконками: Переключиться на [укр. флаг] Русский // живу в Украине

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

Возможно плохо искал, но не нашел подробного описания платной лицензии.
Да, норм. На то мы и рассчитывали, что пользователи начнут самостоятельно хостить иконки, которые им нужны. Кроме того у нас нет CDN для векторных иконок, так что их точно придётся в каком либо виде скачать: как отдельные иконки, как SVG set или как webfont.

запилил сервис примерно аналогичной тематики, но немного другой сути. Заменяет встречаемые названия известных брендов в тексте на их svg логотипы. greybax.github.io/brandifyjs

иконка messi выдает логотип fc real madrid :)
Как житель аргентины, я нахожу это чудовищным. Пошел чистить теги, а пока вот:
<img src="https://habrastorage.org/getpro/habr/comment_images/513/d2d/23c/513d2d23c65389ecb21301cf40893839.png"/>


Messi
Так что можно использовать иконки в коммерческих проектах: все будет работать и не упадет.

И вот прошло всего три года и уже ничего не работает. Что ещё раз доказывает, что нельзя в продакшен серверах использовать бесплатные проекты, которые не находятся, собственно, на этих серверах.
Sign up to leave a comment.

Articles