Free tools for most popular icon operations. Upload an SVG, tweak a couple of settings, and download your result.
Recolor icons
Recolor vector icons or their parts. Solid or gradient color fill.
Add a subicon
A small addition to an icon (plus, minus, warning mark, etc.)
Add padding
Add padding to an image and frame your icon to make it small.
Add text
Place a text on an icon, select a font, size and position.
Add a stroke
Stroke an icon, choose a stroke color and thickness.
Add a background
Fill the background of an icon with a solid or gradient color.
Place on a shape
Add a shape background to your icon.
Position
Move icons and position icons as you like
Rotation
Move icons clockwise for your liking
Use Lunacy to work with icons in a more professional way
Lunacy is a free design app that keeps your flow with AI tools and built-in graphics
1,000,000 more icons, photos and illustration in one desktop app
With Pichon app, you will always have gigabytes of curated graphics at your fingertips. Drag-and-drop the images you need into your graphic app, and go on with the design.
Источник: icons8.com
Генератор кнопок соцсетей
Данный генератор кнопок соцсетей очень прост в использовании. Минимум настроек и вы получаете готовые HTML и CSS.
Установите флажки для соцсетей которые нужно для вас добавить:
Одноклассники
Цвет кнопок
Черно-белые Цветные
Форма кнопок
Круглые Квадратные
Вывод SVG-иконок
Обычный HTML Сделать svg-спрайтом
Добавить Title
Добавить атрибут title
Внимание! Для кнопок требуется вставлять 2 сгенерированных кода: HTML и CSS. Обязательно!
Скопируйте и вставьте данный html-код в нужном месте. Всё что вам остаётся сделать, это заменить значения в атрибуте href=»#» . Просто замените символ # на ссылку на вашу соцсеть.
минифицировать код CSS
Отправить ссылку в:
Размер кнопок
По умолчанию кнопкам задан размер 48px . Это минимальный рекомендуемый стандартами размер для подобных элементов.
Если Вы хотите изменить размер кнопок, вам нужно подобрать подходящий для вас размер.
Размер, это в css свойства для класса .social a . Вот такие строки:
width: 48px; height: 48px;
width — это ширина кнопки, height — высота кнопки. Можно эти значения изменять. Например 48px можно заменить на 40px .
Размер иконки задан в следующем CSS :
.social svg < margin-top: 7px; /* Отступ сверху */ width: 32px; /* Ширина иконки */ height: 32px; /* Высота иконки */ >
Эти значения так же можно изменять.
Источник: kalk.top
Сделать иконки для вк онлайн
Как часто ты обнаруживаешь что тебе не хватает красивых, хорошо прорисованных иконок, которые хорошо вписываются в приложение, интерфейс или сайт?
IconsFlow является мощным онлайн инструментом для создания иконок высокого качества без каких-либо навыков работы в фотошопе или иллюстраторе. Ты можешь просто выбрать нужные иконки из галлереи и изменить цвет элементов, размер, стиль и эффекты. Это проще, чем ты думаешь!