Touch icon
flat-ui:touch
The Touch icon (flat-ui:touch) is a free SVG icon from the Flat UI Icons set by Designmodo, Inc.. It is drawn on a 100 × 100 grid. Flat UI Icons are released under the MIT license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.
- Icon set
- Flat UI Icons
- Author
- Designmodo, Inc.
- License
- MIT
- Size
- 100 × 100
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><clipPath id="SVGlgah6cRj"><circle cx="50" cy="50" r="50"/></clipPath><g fill-rule="evenodd" clip-path="url(#SVGlgah6cRj)" clip-rule="evenodd"><path fill="#34495E" d="M100 50c0 6.67-1.306 13.093-3.676 18.999L3.677 69A50.9 50.9 0 0 1 0 50C0 22.386 22.386 0 50 0c27.613 0 50 22.386 50 50"/><path fill="#D7DBDE" d="M-1 70h102v31H-1z"/><path fill="#fff" d="M100 71v29H0V71zm2-2H-2v33h104z"/><path fill="#DF9274" d="M-22.758-33.75c8.363-8.362 21.921-8.362 30.284 0l66.203 66.203c8.362 8.363 8.362 21.921 0 30.284c-4.034 4.033-9.441 6.262-14.729 6.262c-5.673 0-11.227-1.934-15.556-6.262L-22.758-3.465c-8.363-8.363-8.363-21.922 0-30.285"/><path fill="#fff" d="m61.215 19.844l12.5 12.5c6.195 6.195 7.804 15.227 4.856 22.91L61.275 37.958c-4.999-4.999-5.016-13.088-.06-18.114" opacity=".3"/><path d="M46.456 14.131a1 1 0 1 1-1.414-1.415l4.502-4.5l1.414 1.414zm-7 2.001a.999.999 0 1 1-1.414-1.414l9.002-9.002l1.414 1.414z" opacity=".2"/></g></svg>How to use the Touch icon
React
import { Icon } from "@iconify/react";
<Icon icon="flat-ui:touch" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="flat-ui:touch" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="flat-ui:touch" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[flat-ui--touch]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/flat-ui -->
<div class="i-flat-ui:touch"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="flat-ui:touch"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/flat-ui/touch.svg" alt="Touch icon" width="24" height="24">Touch icon in other icon sets
Touch icon FAQ
Is the Touch icon free for commercial use?
Yes. Flat UI Icons are released under the MIT license, which allows use in personal and commercial projects.
How do I use the Touch icon in React?
Install @iconify/react and render <Icon icon="flat-ui:touch" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Touch icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/flat-ui/touch.svg" alt="Touch icon">, or paste the SVG code inline to style it with CSS.