Иконка для мессенджера Telegram в векторе

Я очень люблю векторную графику и всегда, когда подворачивается случай, использую её по назначению. Особенно в шрифтовых иконках, что в последнее время стало очень популярным. Надеюсь, никто не станет спорить, что в вопросе иконок вектор гораздо круче растра. Вот и сейчас у меня возникла задача создания иконка Telegram  для шрифтовых иконок.

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

Вот, что мне удалось найти:

Иконка Telegram

Иконка Telegram

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

По ссылке далее вы можете взять себе уже готовую иконку для импорта в шрифт в svg-формате. А вот по этой ссылке вы можете взять себе уже готовый набор для сервиса Fontello.

 

UPD — 28.11.2016

 

Новый метод

Хочу отметить, что гораздо удобнее подключать на сайт иконки через svg спрайт, а не через шрифт или через svg файлы. Метод создания очень прост — создаёте или находите нужную иконку в svg формате (найти можно, например, на очень содержательном сайте — www.flaticon.com), и грузите ее на https://icomoon.io/app/#/select.

 

Эту иконку я нарисовал сам и залил её на icomoon. Вот что у меня получилось:

HTML вывода иконки

Содержание svg файла

Чтобы применить иконку на сайте, надо взять содержание svg файла и вставить куда-нибудь сразу после body. А чтобы вывести иконку в нужном месте, нужно взять код вывода иконки и вставить туда, куда нужно. И всё.

Прекрасным свойством является то, что вы можете перекрашивать иконку по ховеру или в статичном положении, добавив svg селектору свойство fill.