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

Kostenlose Edit Icons (SVG)

48 kostenlose Edit Icons aus Open-Source-Sets – klicke auf eines, um Größe, Farbe und Strichstärke anzupassen, und kopiere es als SVG, JSX, Data-URI oder CSS.

Aktualisiert am

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

Edit Icons verwenden

Ein Stift steht für Bearbeiten oder Umbenennen; platziere ihn neben dem Inhalt, den er verändert.

Alle Icons hier folgen currentColor, d. h. sie übernehmen die Textfarbe des Elements, in dem sie stehen – ein SVG funktioniert auf hellen und dunklen Hintergründen, in Links und in Buttons. Setze eine explizite width und height (oder definiere die Größe per CSS mit 1em), damit das Layout nicht springt, während die Seite lädt.

Barrierefreie Icons

Ist das Icon dekorativ oder steht es neben sichtbarem Text, füge aria-hidden="true" hinzu. Ist es der einzige Inhalt eines Buttons oder Links, gib diesem Element ein aria-label wie „Bearbeiten“.

Lizenzen

Diese Edit Icons stammen aus Lucide, Tabler, Heroicons, Phosphor, Bootstrap Icons, Iconoir, Material Symbols und Material Design Icons – Open-Source-Sets unter MIT-, ISC- oder Apache-2.0-Lizenz, die persönliche und kommerzielle Nutzung erlauben. Brauchst du etwas anderes? Durchsuche alle 70.000+ Icons im SVG Icon Finder.

Häufige Fragen

Sind diese Edit Icons für die kommerzielle Nutzung kostenlos?
Ja. Sie stammen aus Open-Source-Icon-Sets unter MIT-, ISC- oder Apache-2.0-Lizenz, die kommerzielle Nutzung erlauben. Behalte den Lizenzhinweis bei, wenn du die Icon-Dateien selbst weitergibst.
Wie ändere ich die Farbe eines Edit Icons?
Die SVGs nutzen currentColor, also setzt du die CSS-Farbe des übergeordneten Elements – oder öffnest das Icon im Finder und wählst vor dem Kopieren eine feste Farbe.
Kann ich diese Icons in Webflow oder React verwenden?
Ja. Öffne ein Icon und nutze Copy to Webflow (fügt ein Code Embed ein) oder Copy JSX für eine React-Komponente.