mouse icon
mouse from IconPark by ByteDance · Color · Hardware · Apache-2.0 Free for personal and commercial use.
- Name
- mouse
- Set
- IconPark
- Style
- Color
- Category
- Hardware
- Viewbox
- 48×48
- License
- Apache 2.0
The same icon in other sets
mouseBootstrap IconsmouseBoxIcons v2mouseBoxIcons v2 SolidmouseEmoji One (Colored)mouseElement PlusmouseFont Awesome SolidmouseFluent EmojimouseFluent Emoji FlatmouseFluent Emoji High ContrastmouseFirefox OS Emojimousecss.ggmouseIconPark OutlinemouseIconPark SolidmouseIconPark TwoTonemouseIonIconsmouseLine AwesomemouseLucidemouseMage IconsmouseMajesticonsmouseMaterial SymbolsmouseMaterial Symbols LightmouseMaterial Design Iconsmouse-fillMingCute IconmouseNoto Emoji
More hardware icons from IconPark
Use the mouse icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path fill="#2F88FF" fill-rule="evenodd" d="M24 16H12V32C12 38.6274 17.3726 44 24 44C30.6274 44 36 38.6274 36 32V16H24Z" clip-rule="evenodd"/><path d="M36 16C36 9.37258 30.6274 4 24 4V16H36Z"/><path d="M24 4C17.3726 4 12 9.37258 12 16H24V4Z"/></g></svg>
React
import type { SVGProps } from "react";
export function IconParkMouse(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none" stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4"><path fill="#2F88FF" fillRule="evenodd" d="M24 16H12V32C12 38.6274 17.3726 44 24 44C30.6274 44 36 38.6274 36 32V16H24Z" clipRule="evenodd"/><path d="M36 16C36 9.37258 30.6274 4 24 4V16H36Z"/><path d="M24 4C17.3726 4 12 9.37258 12 16H24V4Z"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path fill="#2F88FF" fill-rule="evenodd" d="M24 16H12V32C12 38.6274 17.3726 44 24 44C30.6274 44 36 38.6274 36 32V16H24Z" clip-rule="evenodd"/><path d="M36 16C36 9.37258 30.6274 4 24 4V16H36Z"/><path d="M24 4C17.3726 4 12 9.37258 12 16H24V4Z"/></g></svg> </template>
CSS
.icon-mouse {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%3E%3Cpath%20fill%3D%22%232F88FF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M24%2016H12V32C12%2038.6274%2017.3726%2044%2024%2044C30.6274%2044%2036%2038.6274%2036%2032V16H24Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20d%3D%22M36%2016C36%209.37258%2030.6274%204%2024%204V16H36Z%22%2F%3E%3Cpath%20d%3D%22M24%204C17.3726%204%2012%209.37258%2012%2016H24V4Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%3E%3Cpath%20fill%3D%22%232F88FF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M24%2016H12V32C12%2038.6274%2017.3726%2044%2024%2044C30.6274%2044%2036%2038.6274%2036%2032V16H24Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20d%3D%22M36%2016C36%209.37258%2030.6274%204%2024%204V16H36Z%22%2F%3E%3Cpath%20d%3D%22M24%204C17.3726%204%2012%209.37258%2012%2016H24V4Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/icon-park/mouse.svg?color=%231a73e8&size=48
