Ai Image Edit icon
A hand-drawn ai image edit icon that animates on its own: an SVG on a 24px grid in thin, regular and bold strokes. Free to download and use in the apps you build (LumioUI License). It takes your text colour through currentColor.
- Category
- Software
- Grid
- 24 × 24
- Strokes
- 1.5 · 2 · 2.5
- Name
ai-image-edit
Stroke weights and sizes
Use it in React Native
Paste the SVG into react-native-svg's SvgXml. The Icon component covers a curated set by name, and Animated Icons plays the motion natively.
TSX AiImageEditIcon.tsx
import { SvgXml } from "react-native-svg";
const AiImageEditIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M3.58 10.47L3.58 15.89C3.58 18.35 5.55 20.33 8.01 20.33L11.46 20.33"></path><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M9.98 4.56L14.41 4.56C16.88 4.56 18.85 6.53 18.85 9L18.85 10.97"></path><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M3.87 15.5L6.83 12.54C7.52 11.85 8.6 11.85 9.29 12.54L11.95 15.2"></path><g><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M17.96 14.81C18.85 13.92 20.23 13.92 21.11 14.81C22 15.69 22 17.07 21.11 17.96L19.44 19.63Q17.76 21.31 16.43 21.66Q15.1 22 14.51 21.36Q13.92 20.72 14.27 19.44Q14.61 18.16 16.29 16.48L17.96 14.81Z"></path><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M18.55 14.81L20.82 17.07"></path></g><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M4.27 2.3C4.72 4.11 4.72 4.11 6.53 4.56C4.72 5.01 4.72 5.01 4.27 6.83C3.81 5.01 3.81 5.01 2 4.56C3.81 4.11 3.81 4.11 4.27 2.3Z"></path></svg>`;
<SvgXml xml={AiImageEditIcon} width={24} height={24} color="#111" />SVG code
The still glyph. The animated version, linked above, plays its motion on its own with SMIL, so it needs no script.
SVG ai-image-edit.svg
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M3.58 10.47L3.58 15.89C3.58 18.35 5.55 20.33 8.01 20.33L11.46 20.33"></path><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M9.98 4.56L14.41 4.56C16.88 4.56 18.85 6.53 18.85 9L18.85 10.97"></path><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M3.87 15.5L6.83 12.54C7.52 11.85 8.6 11.85 9.29 12.54L11.95 15.2"></path><g><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M17.96 14.81C18.85 13.92 20.23 13.92 21.11 14.81C22 15.69 22 17.07 21.11 17.96L19.44 19.63Q17.76 21.31 16.43 21.66Q15.1 22 14.51 21.36Q13.92 20.72 14.27 19.44Q14.61 18.16 16.29 16.48L17.96 14.81Z"></path><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M18.55 14.81L20.82 17.07"></path></g><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M4.27 2.3C4.72 4.11 4.72 4.11 6.53 4.56C4.72 5.01 4.72 5.01 4.27 6.83C3.81 5.01 3.81 5.01 2 4.56C3.81 4.11 3.81 4.11 4.27 2.3Z"></path></svg>On the web, link it straight from the CDN:
HTML index.html
<img src="https://cdn.lumioui.com/iconset/static/ai-image-edit.svg" width="24" height="24" alt="Ai Image Edit" />
