devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt

Бесплатные иконки редактирования (SVG)

48 бесплатных иконок редактирования из наборов с открытым исходным кодом — нажмите на любую, чтобы изменить размер, цвет и толщину линии, и скопируйте её как SVG, JSX, data URI или CSS.

Обновлено

pencil
Lucidepencil
Tablerpencil
Heroiconspencil
Phosphorpencil
Bootstrap Iconsedit-pencil
Iconoirstylus-pencil
Material Symbolspencil
Material Design Iconspencil-line
Lucidepencil-filled
Tablerpencil-16-solid
Heroiconspencil-bold
Phosphorpencil-fill
Bootstrap Iconsdesign-pencil
Iconoirstylus-pencil-outline
Material Symbolspencil-outline
Material Design Iconspencil-off
Lucidepencil-x
Tablerpencil-20-solid
Heroiconspencil-duotone
Phosphorpencil-square
Bootstrap Iconsstylus-pencil-outline-rounded
Material Symbolspencil-box
Material Design Iconspencil-ruler
Lucidepencil-ai
Tablerpencil-solid
Heroiconspencil-fill
Phosphorstylus-pencil-outline-sharp
Material Symbolspencil-box-outline
Material Design Iconspencil-up
Tablerpencil-light
Phosphorstylus-pencil-rounded
Material Symbolspencil-off
Material Design Iconspencil-cog
Tablerpencil-line
Phosphorstylus-pencil-sharp
Material Symbolspencil-off-outline
Material Design Iconspencil-off
Tablerpencil-thin
Phosphorlead-pencil
Material Design Iconspencil-pin
Tablernote-pencil
Phosphorpencil-lock
Material Design Iconsfile-pencil
Tablernote-pencil-bold
Phosphorpencil-lock-outline
Material Design Iconsfile-pencil-filled
Tablernote-pencil-duotone
Phosphor

Использование иконок редактирования

Карандаш обозначает редактирование или переименование; размещайте его рядом с содержимым, которое он меняет.

Все иконки здесь следуют currentColor, поэтому они принимают цвет текста того элемента, в котором находятся — один SVG работает на светлом и тёмном фоне, в ссылках и кнопках. Задайте явные width и height (или задайте размеры в CSS через 1em), чтобы верстка не смещалась при загрузке страницы.

Доступные иконки

Если иконка декоративная или стоит рядом с видимым текстом, добавьте aria-hidden="true". Если она — единственное содержимое кнопки или ссылки, задайте этому элементу aria-label, например «Редактировать».

Лицензии

Эти иконки редактирования взяты из Lucide, Tabler, Heroicons, Phosphor, Bootstrap Icons, Iconoir, Material Symbols, Material Design Icons — наборов с открытым исходным кодом под лицензиями MIT, ISC или Apache 2.0, которые разрешают личное и коммерческое использование. Нужно что-то другое? Ищите среди более 70 000 иконок в SVG Icon Finder.

Часто задаваемые вопросы

Можно ли бесплатно использовать эти иконки редактирования в коммерческих целях?
Да. Они взяты из наборов иконок с открытым исходным кодом под лицензиями MIT, ISC или Apache 2.0, которые разрешают коммерческое использование. Сохраняйте уведомление о лицензии, если распространяете сами файлы иконок.
Как изменить цвет иконки редактирования?
SVG используют currentColor, поэтому задайте CSS-свойство color для родительского элемента — или откройте иконку в поиске и выберите фиксированный цвет перед копированием.
Можно ли использовать эти иконки в Webflow или React?
Да. Откройте иконку и используйте «Копировать для Webflow» (вставит Code Embed) или «Копировать JSX» для компонента React.