App Tutorial SVG illustration, flat

Free
App Tutorial SVG illustration, flat

A pointing hand approaches a highlighted tap target on a phone screen. Include it in an in-app walkthrough or a mobile help guide.

Sign in to download. Free SVGs are free with any account.

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/jTExtqo107Lc/amnt.svg" alt="App Tutorial" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300" fill="none"><ellipse cx="204" cy="269" rx="114" ry="11" fill="#DED9EB" opacity=".55"/><rect x="113" y="24" width="151" height="242" rx="23" fill="#8B82A6"/><rect x="108" y="21" width="151" height="242" rx="23" fill="#40394F"/><rect x="117" y="30" width="133" height="224" rx="16" fill="#F4ECDC"/><path d="M153 30h61v7a8 8 0 0 1-8 8h-45a8 8 0 0 1-8-8Z" fill="#40394F"/><rect x="168" y="33" width="28" height="4" rx="2" fill="#8B82A6"/><circle cx="202" cy="35" r="2" fill="#8B82A6"/><rect x="132" y="62" width="31" height="31" rx="10" fill="#A9C8BC"/><path d="m140 78 5 5 10-11" stroke="#F4ECDC" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><rect x="173" y="66" width="59" height="6" rx="3" fill="#8B82A6"/><rect x="173" y="79" width="42" height="5" rx="2.5" fill="#DED9EB"/><rect x="132" y="107" width="103" height="44" rx="9" fill="#DED9EB"/><rect x="143" y="118" width="21" height="21" rx="6" fill="#8B82A6"/><rect x="174" y="119" width="48" height="5" rx="2.5" fill="#F4ECDC"/><rect x="174" y="130" width="33" height="5" rx="2.5" fill="#F4ECDC"/><rect x="132" y="163" width="103" height="57" rx="12" fill="#EACB79" opacity=".4"/><rect x="138" y="169" width="91" height="45" rx="10" fill="#EACB79"/><circle cx="184" cy="191" r="14" fill="#F4ECDC"/><path d="M177 191h14m-5-5 5 5-5 5" stroke="#40394F" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><rect x="128" y="159" width="111" height="65" rx="16" stroke="#DA837B" stroke-width="2" stroke-dasharray="5 5"/><rect x="165" y="241" width="37" height="4" rx="2" fill="#DED9EB"/><path d="m249 175 11-7m-14-8 4-11m7 37 13-1" stroke="#DA837B" stroke-width="3" stroke-linecap="round"/><circle cx="184" cy="191" r="22" stroke="#DA837B" stroke-width="2" opacity=".65"/><path d="m281 262-19-23c-8-3-15-8-20-13l-57-28c-5-3-7-7-5-11s7-5 12-3l44 20-8-11c-4-6-2-11 3-13 4-2 8 0 12 5l7 9c-2-6 0-10 5-11 5-1 8 2 11 7l5 8c0-5 3-8 7-8 5 0 8 4 10 8l12 25c4 8 3 15 1 22l8 10Z" fill="#EDB59D"/><path d="m237 204 13 9m0-19 10 15m11-11 8 13" stroke="#DA837B" stroke-width="2" stroke-linecap="round"/><path d="M184 186c3-1 6 0 9 2l5 3-3 6-7-3c-4-2-5-5-4-8Z" fill="#F4ECDC" opacity=".6"/><path d="m275 259 28-19a4 4 0 0 1 5 1l20 25a5 5 0 0 1-4 8h-37l-13-10a3 3 0 0 1 1-5Z" fill="#A9C8BC"/><path d="m281 258 14 16h-8l-13-10a3 3 0 0 1 1-5l3-2Z" fill="#8B82A6"/><circle cx="305" cy="257" r="3" fill="#F4ECDC"/><path d="M77 117v14m-7-7h14" stroke="#A9C8BC" stroke-width="3" stroke-linecap="round"/><circle cx="290" cy="76" r="6" fill="#EACB79"/><circle cx="86" cy="216" r="4" fill="#DA837B"/><path d="m298 122 6-8 6 8-6 8Z" fill="#DED9EB"/></svg>
CSS background-image
.app-tutorial {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/jTExtqo107Lc/amnt.svg");
  background-size: contain;
}
React
import AppTutorialSvg from "./app-tutorial.jsx"; // from the React tab above

<AppTutorialSvg width={48} height={48} />

Made with AMNT

AMNT SVG Pro 1.1 drew this from the words App Tutorial: Phone screen with highlighted tap target and a pointing hand. as part of the pack Onboarding Illustrations, Flat. Want one like it? Make your own in the SVG studio.

Rest of Onboarding Illustrations, Flat

Similar SVGs

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence