joystick emoji

joystick from Emoji One (Colored) by Emoji One · Default · Objects · CC-BY-4.0 Attribution required.

Name
joystick
Set
Emoji One (Colored)
Style
Default
Category
Objects
Viewbox
64×64
License
CC BY 4.0

The same emoji in other sets

joystickBootstrap IconsjoystickBoxIcons v2joystickBoxIcons v2 Solidjoystick-20-filledFluent UI System IconsjoystickFluent EmojijoystickFluent Emoji FlatjoystickFluent Emoji High ContrastjoystickIconParkjoystickIconPark OutlinejoystickIconPark SolidjoystickIconPark TwoTonejoystickJam IconsjoystickLucidejoystickMaterial SymbolsjoystickMaterial Symbols LightjoystickNoto EmojijoystickOpenMojijoystickPhosphorjoystickPixelarticonsjoystick-outlineTeenyiconsjoystickTwitter Emoji

More objects icons from Emoji One (Colored)

alarm-clockalembicamphorabackpackbalance-scaleballot-box-with-ballotbar-chartbarber-polebathtubbatterybedbellhop-bellbikiniblack-nibblue-bookbombbookmarkbookmark-tabsbookscalendarcameracamera-with-flashcandlecard-file-box

Use the joystick emoji

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64"><path fill="#242a33" d="M56.9 48.1c-.7-3-3.2-9-4.8-11.8c-2.3-4.1-38-4.1-40.3 0c-1.6 2.8-4.1 8.8-4.8 11.8c-.4 1.6 1.1 9.3 1.1 9.3c.5 2.5 2.9 4.6 5.5 4.6h36.8c2.5 0 5-2.1 5.4-4.6c0 0 1.5-7.5 1.1-9.3"/><path fill="#a1acb3" d="M56.1 46.4c-.5.8-1.2 1.5-2.2 2c-.5.2-1.1.3-1.6.4l-1.6.1c-2.1.1-4.2.2-6.2.2c-4.2.1-8.3.2-12.5.2s-8.3 0-12.5-.2c-2.1-.1-4.2-.1-6.2-.2l-1.6-.1c-.5 0-1.1-.2-1.6-.4c-1-.4-1.8-1.2-2.2-2c.6.7 1.5 1.3 2.4 1.6c.5.1.9.2 1.4.2l1.6-.1c2.1-.1 4.2-.2 6.2-.2c4.2-.1 8.3-.2 12.5-.2s8.3.1 12.5.2c2.1.1 4.2.1 6.2.2l1.6.1c.5 0 1 0 1.4-.2c.9-.3 1.8-.9 2.4-1.6"/><path fill="#6b7278" d="M7.8 53.4c.5-.8 1.2-1.5 2.2-2c.5-.2 1.1-.3 1.6-.4l1.6-.1c2.1-.1 4.2-.2 6.2-.2c4.2-.1 8.3-.2 12.5-.2s8.3 0 12.5.2c2.1.1 4.2.1 6.2.2l1.6.1c.5 0 1.1.2 1.6.4c1 .4 1.8 1.2 2.2 2c-.6-.7-1.5-1.3-2.4-1.6c-.5-.1-.9-.2-1.4-.2l-1.6.1c-2.1.1-4.2.2-6.2.2c-4.2.1-8.3.2-12.5.2s-8.3-.1-12.5-.2c-2.1-.1-4.2-.1-6.2-.2l-1.6-.1c-.5 0-1 0-1.4.2c-.9.3-1.7.9-2.4 1.6"/><ellipse cx="36" cy="40.9" fill="#53585b" rx="11.9" ry="4.5"/><ellipse cx="36" cy="37.9" fill="#676e72" rx="10.6" ry="3.5"/><ellipse cx="36" cy="35.5" fill="#53585b" rx="9.4" ry="3.1"/><path fill="#d2cfcf" d="M39.8 17.1h-7.6V34c0 1.9 7.6 1.9 7.6 0z"/><ellipse cx="36" cy="12.4" fill="#ed4c5c" rx="10.5" ry="10.4"/><path fill="#a5000c" d="M24.1 35.1H14v2.2c1.8 2.2 8.4 2.2 10.2 0c-.1 0-.1-2.2-.1-2.2"/><ellipse cx="19" cy="35.1" fill="#ed4c5c" rx="5.1" ry="2.2"/></svg>

React

import type { SVGProps } from "react";

export function EmojioneJoystick(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64"><path fill="#242a33" d="M56.9 48.1c-.7-3-3.2-9-4.8-11.8c-2.3-4.1-38-4.1-40.3 0c-1.6 2.8-4.1 8.8-4.8 11.8c-.4 1.6 1.1 9.3 1.1 9.3c.5 2.5 2.9 4.6 5.5 4.6h36.8c2.5 0 5-2.1 5.4-4.6c0 0 1.5-7.5 1.1-9.3"/><path fill="#a1acb3" d="M56.1 46.4c-.5.8-1.2 1.5-2.2 2c-.5.2-1.1.3-1.6.4l-1.6.1c-2.1.1-4.2.2-6.2.2c-4.2.1-8.3.2-12.5.2s-8.3 0-12.5-.2c-2.1-.1-4.2-.1-6.2-.2l-1.6-.1c-.5 0-1.1-.2-1.6-.4c-1-.4-1.8-1.2-2.2-2c.6.7 1.5 1.3 2.4 1.6c.5.1.9.2 1.4.2l1.6-.1c2.1-.1 4.2-.2 6.2-.2c4.2-.1 8.3-.2 12.5-.2s8.3.1 12.5.2c2.1.1 4.2.1 6.2.2l1.6.1c.5 0 1 0 1.4-.2c.9-.3 1.8-.9 2.4-1.6"/><path fill="#6b7278" d="M7.8 53.4c.5-.8 1.2-1.5 2.2-2c.5-.2 1.1-.3 1.6-.4l1.6-.1c2.1-.1 4.2-.2 6.2-.2c4.2-.1 8.3-.2 12.5-.2s8.3 0 12.5.2c2.1.1 4.2.1 6.2.2l1.6.1c.5 0 1.1.2 1.6.4c1 .4 1.8 1.2 2.2 2c-.6-.7-1.5-1.3-2.4-1.6c-.5-.1-.9-.2-1.4-.2l-1.6.1c-2.1.1-4.2.2-6.2.2c-4.2.1-8.3.2-12.5.2s-8.3-.1-12.5-.2c-2.1-.1-4.2-.1-6.2-.2l-1.6-.1c-.5 0-1 0-1.4.2c-.9.3-1.7.9-2.4 1.6"/><ellipse cx="36" cy="40.9" fill="#53585b" rx="11.9" ry="4.5"/><ellipse cx="36" cy="37.9" fill="#676e72" rx="10.6" ry="3.5"/><ellipse cx="36" cy="35.5" fill="#53585b" rx="9.4" ry="3.1"/><path fill="#d2cfcf" d="M39.8 17.1h-7.6V34c0 1.9 7.6 1.9 7.6 0z"/><ellipse cx="36" cy="12.4" fill="#ed4c5c" rx="10.5" ry="10.4"/><path fill="#a5000c" d="M24.1 35.1H14v2.2c1.8 2.2 8.4 2.2 10.2 0c-.1 0-.1-2.2-.1-2.2"/><ellipse cx="19" cy="35.1" fill="#ed4c5c" rx="5.1" ry="2.2"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64"><path fill="#242a33" d="M56.9 48.1c-.7-3-3.2-9-4.8-11.8c-2.3-4.1-38-4.1-40.3 0c-1.6 2.8-4.1 8.8-4.8 11.8c-.4 1.6 1.1 9.3 1.1 9.3c.5 2.5 2.9 4.6 5.5 4.6h36.8c2.5 0 5-2.1 5.4-4.6c0 0 1.5-7.5 1.1-9.3"/><path fill="#a1acb3" d="M56.1 46.4c-.5.8-1.2 1.5-2.2 2c-.5.2-1.1.3-1.6.4l-1.6.1c-2.1.1-4.2.2-6.2.2c-4.2.1-8.3.2-12.5.2s-8.3 0-12.5-.2c-2.1-.1-4.2-.1-6.2-.2l-1.6-.1c-.5 0-1.1-.2-1.6-.4c-1-.4-1.8-1.2-2.2-2c.6.7 1.5 1.3 2.4 1.6c.5.1.9.2 1.4.2l1.6-.1c2.1-.1 4.2-.2 6.2-.2c4.2-.1 8.3-.2 12.5-.2s8.3.1 12.5.2c2.1.1 4.2.1 6.2.2l1.6.1c.5 0 1 0 1.4-.2c.9-.3 1.8-.9 2.4-1.6"/><path fill="#6b7278" d="M7.8 53.4c.5-.8 1.2-1.5 2.2-2c.5-.2 1.1-.3 1.6-.4l1.6-.1c2.1-.1 4.2-.2 6.2-.2c4.2-.1 8.3-.2 12.5-.2s8.3 0 12.5.2c2.1.1 4.2.1 6.2.2l1.6.1c.5 0 1.1.2 1.6.4c1 .4 1.8 1.2 2.2 2c-.6-.7-1.5-1.3-2.4-1.6c-.5-.1-.9-.2-1.4-.2l-1.6.1c-2.1.1-4.2.2-6.2.2c-4.2.1-8.3.2-12.5.2s-8.3-.1-12.5-.2c-2.1-.1-4.2-.1-6.2-.2l-1.6-.1c-.5 0-1 0-1.4.2c-.9.3-1.7.9-2.4 1.6"/><ellipse cx="36" cy="40.9" fill="#53585b" rx="11.9" ry="4.5"/><ellipse cx="36" cy="37.9" fill="#676e72" rx="10.6" ry="3.5"/><ellipse cx="36" cy="35.5" fill="#53585b" rx="9.4" ry="3.1"/><path fill="#d2cfcf" d="M39.8 17.1h-7.6V34c0 1.9 7.6 1.9 7.6 0z"/><ellipse cx="36" cy="12.4" fill="#ed4c5c" rx="10.5" ry="10.4"/><path fill="#a5000c" d="M24.1 35.1H14v2.2c1.8 2.2 8.4 2.2 10.2 0c-.1 0-.1-2.2-.1-2.2"/><ellipse cx="19" cy="35.1" fill="#ed4c5c" rx="5.1" ry="2.2"/></svg>
</template>

CSS

.icon-joystick {
  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%2064%2064%22%3E%3Cpath%20fill%3D%22%23242a33%22%20d%3D%22M56.9%2048.1c-.7-3-3.2-9-4.8-11.8c-2.3-4.1-38-4.1-40.3%200c-1.6%202.8-4.1%208.8-4.8%2011.8c-.4%201.6%201.1%209.3%201.1%209.3c.5%202.5%202.9%204.6%205.5%204.6h36.8c2.5%200%205-2.1%205.4-4.6c0%200%201.5-7.5%201.1-9.3%22%2F%3E%3Cpath%20fill%3D%22%23a1acb3%22%20d%3D%22M56.1%2046.4c-.5.8-1.2%201.5-2.2%202c-.5.2-1.1.3-1.6.4l-1.6.1c-2.1.1-4.2.2-6.2.2c-4.2.1-8.3.2-12.5.2s-8.3%200-12.5-.2c-2.1-.1-4.2-.1-6.2-.2l-1.6-.1c-.5%200-1.1-.2-1.6-.4c-1-.4-1.8-1.2-2.2-2c.6.7%201.5%201.3%202.4%201.6c.5.1.9.2%201.4.2l1.6-.1c2.1-.1%204.2-.2%206.2-.2c4.2-.1%208.3-.2%2012.5-.2s8.3.1%2012.5.2c2.1.1%204.2.1%206.2.2l1.6.1c.5%200%201%200%201.4-.2c.9-.3%201.8-.9%202.4-1.6%22%2F%3E%3Cpath%20fill%3D%22%236b7278%22%20d%3D%22M7.8%2053.4c.5-.8%201.2-1.5%202.2-2c.5-.2%201.1-.3%201.6-.4l1.6-.1c2.1-.1%204.2-.2%206.2-.2c4.2-.1%208.3-.2%2012.5-.2s8.3%200%2012.5.2c2.1.1%204.2.1%206.2.2l1.6.1c.5%200%201.1.2%201.6.4c1%20.4%201.8%201.2%202.2%202c-.6-.7-1.5-1.3-2.4-1.6c-.5-.1-.9-.2-1.4-.2l-1.6.1c-2.1.1-4.2.2-6.2.2c-4.2.1-8.3.2-12.5.2s-8.3-.1-12.5-.2c-2.1-.1-4.2-.1-6.2-.2l-1.6-.1c-.5%200-1%200-1.4.2c-.9.3-1.7.9-2.4%201.6%22%2F%3E%3Cellipse%20cx%3D%2236%22%20cy%3D%2240.9%22%20fill%3D%22%2353585b%22%20rx%3D%2211.9%22%20ry%3D%224.5%22%2F%3E%3Cellipse%20cx%3D%2236%22%20cy%3D%2237.9%22%20fill%3D%22%23676e72%22%20rx%3D%2210.6%22%20ry%3D%223.5%22%2F%3E%3Cellipse%20cx%3D%2236%22%20cy%3D%2235.5%22%20fill%3D%22%2353585b%22%20rx%3D%229.4%22%20ry%3D%223.1%22%2F%3E%3Cpath%20fill%3D%22%23d2cfcf%22%20d%3D%22M39.8%2017.1h-7.6V34c0%201.9%207.6%201.9%207.6%200z%22%2F%3E%3Cellipse%20cx%3D%2236%22%20cy%3D%2212.4%22%20fill%3D%22%23ed4c5c%22%20rx%3D%2210.5%22%20ry%3D%2210.4%22%2F%3E%3Cpath%20fill%3D%22%23a5000c%22%20d%3D%22M24.1%2035.1H14v2.2c1.8%202.2%208.4%202.2%2010.2%200c-.1%200-.1-2.2-.1-2.2%22%2F%3E%3Cellipse%20cx%3D%2219%22%20cy%3D%2235.1%22%20fill%3D%22%23ed4c5c%22%20rx%3D%225.1%22%20ry%3D%222.2%22%2F%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%2064%2064%22%3E%3Cpath%20fill%3D%22%23242a33%22%20d%3D%22M56.9%2048.1c-.7-3-3.2-9-4.8-11.8c-2.3-4.1-38-4.1-40.3%200c-1.6%202.8-4.1%208.8-4.8%2011.8c-.4%201.6%201.1%209.3%201.1%209.3c.5%202.5%202.9%204.6%205.5%204.6h36.8c2.5%200%205-2.1%205.4-4.6c0%200%201.5-7.5%201.1-9.3%22%2F%3E%3Cpath%20fill%3D%22%23a1acb3%22%20d%3D%22M56.1%2046.4c-.5.8-1.2%201.5-2.2%202c-.5.2-1.1.3-1.6.4l-1.6.1c-2.1.1-4.2.2-6.2.2c-4.2.1-8.3.2-12.5.2s-8.3%200-12.5-.2c-2.1-.1-4.2-.1-6.2-.2l-1.6-.1c-.5%200-1.1-.2-1.6-.4c-1-.4-1.8-1.2-2.2-2c.6.7%201.5%201.3%202.4%201.6c.5.1.9.2%201.4.2l1.6-.1c2.1-.1%204.2-.2%206.2-.2c4.2-.1%208.3-.2%2012.5-.2s8.3.1%2012.5.2c2.1.1%204.2.1%206.2.2l1.6.1c.5%200%201%200%201.4-.2c.9-.3%201.8-.9%202.4-1.6%22%2F%3E%3Cpath%20fill%3D%22%236b7278%22%20d%3D%22M7.8%2053.4c.5-.8%201.2-1.5%202.2-2c.5-.2%201.1-.3%201.6-.4l1.6-.1c2.1-.1%204.2-.2%206.2-.2c4.2-.1%208.3-.2%2012.5-.2s8.3%200%2012.5.2c2.1.1%204.2.1%206.2.2l1.6.1c.5%200%201.1.2%201.6.4c1%20.4%201.8%201.2%202.2%202c-.6-.7-1.5-1.3-2.4-1.6c-.5-.1-.9-.2-1.4-.2l-1.6.1c-2.1.1-4.2.2-6.2.2c-4.2.1-8.3.2-12.5.2s-8.3-.1-12.5-.2c-2.1-.1-4.2-.1-6.2-.2l-1.6-.1c-.5%200-1%200-1.4.2c-.9.3-1.7.9-2.4%201.6%22%2F%3E%3Cellipse%20cx%3D%2236%22%20cy%3D%2240.9%22%20fill%3D%22%2353585b%22%20rx%3D%2211.9%22%20ry%3D%224.5%22%2F%3E%3Cellipse%20cx%3D%2236%22%20cy%3D%2237.9%22%20fill%3D%22%23676e72%22%20rx%3D%2210.6%22%20ry%3D%223.5%22%2F%3E%3Cellipse%20cx%3D%2236%22%20cy%3D%2235.5%22%20fill%3D%22%2353585b%22%20rx%3D%229.4%22%20ry%3D%223.1%22%2F%3E%3Cpath%20fill%3D%22%23d2cfcf%22%20d%3D%22M39.8%2017.1h-7.6V34c0%201.9%207.6%201.9%207.6%200z%22%2F%3E%3Cellipse%20cx%3D%2236%22%20cy%3D%2212.4%22%20fill%3D%22%23ed4c5c%22%20rx%3D%2210.5%22%20ry%3D%2210.4%22%2F%3E%3Cpath%20fill%3D%22%23a5000c%22%20d%3D%22M24.1%2035.1H14v2.2c1.8%202.2%208.4%202.2%2010.2%200c-.1%200-.1-2.2-.1-2.2%22%2F%3E%3Cellipse%20cx%3D%2219%22%20cy%3D%2235.1%22%20fill%3D%22%23ed4c5c%22%20rx%3D%225.1%22%20ry%3D%222.2%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/emojione/joystick.svg?color=%231a73e8&size=48