User Interface icon
flat-ui:user-interface
The User Interface icon (flat-ui:user-interface) 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
- Tags
- userinterface
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="#EBEDEE" d="M4 0h92a4 4 0 0 1 4 4v92a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4"/><path fill="#fff" d="M10 20h80v70H10z"/><path fill="#E74C3C" d="M13 7a3 3 0 1 1 0 6a3 3 0 0 1 0-6"/><path fill="#F39C12" d="M23 7a3 3 0 1 1 0 6a3 3 0 0 1 0-6"/><path fill="#17A085" d="M33 7a3 3 0 1 1 0 6a3 3 0 0 1 0-6"/><path fill="#fff" d="M45 7h45v6H45z"/><path fill="#BDC3C7" d="M20 45v5h25v-5zm0 15h25v-5H20zm0 10h25v-5H20zm0 10h25v-5H20z"/><path fill="#1ABC9C" d="M20 30h60v10H20z"/><path fill="#BDC3C7" d="M50 45v15h30V45zm0 35h30V65H50z"/></svg>How to use the User Interface icon
React
import { Icon } from "@iconify/react";
<Icon icon="flat-ui:user-interface" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="flat-ui:user-interface" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="flat-ui:user-interface" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[flat-ui--user-interface]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/flat-ui -->
<div class="i-flat-ui:user-interface"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="flat-ui:user-interface"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/flat-ui/user-interface.svg" alt="User Interface icon" width="24" height="24">User Interface icon FAQ
Is the User Interface 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 User Interface icon in React?
Install @iconify/react and render <Icon icon="flat-ui:user-interface" />, or use “Copy code” on this page to get a standalone React component.
How do I add the User Interface icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/flat-ui/user-interface.svg" alt="User Interface icon">, or paste the SVG code inline to style it with CSS.