octopus emoji
octopus from Twitter Emoji by Twitter · Default · Animals & Nature · CC-BY-4.0 Attribution required.
- Name
- octopus
- Set
- Twitter Emoji
- Style
- Default
- Category
- Animals & Nature
- Viewbox
- 36×36
- License
- CC BY 4.0
The same emoji in other sets
More animals & nature icons from Twitter Emoji
Use the octopus emoji
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#553788" d="M10 12c3 5 0 10.692-3 9.692s-4 2-1 3s9.465-.465 13-4c1-1 2-1 2-1z"/><path fill="#553788" d="M26 12c-3 5 0 10.692 3 9.692s4 2 1 3s-9.465-.465-13-4c-1-1-2-1-2-1z"/><path fill="#744eaa" d="M30.188 16c-3 5 0 10.692 3 9.692s4 2 1 3s-9.465-.465-13-4c-1-1-2-1-2-1zM5.812 16c3 5 0 10.692-3 9.692s-4 2-1 3s9.465-.465 13-4c1-1 2-1 2-1z"/><path fill="#9266cc" d="M33.188 31.375c-2.729.91-6.425-5.626-4.812-10.578C30.022 17.554 31 13.94 31 11c0-7.18-5.82-11-13-11S5 3.82 5 11c0 2.94.978 6.554 2.624 9.797c1.613 4.952-2.083 11.488-4.812 10.578c-3-1-4 3-1 4s8.31-.627 12-4c2.189-2 4.189-2 4.189-2s2 0 4.188 2c3.69 3.373 9 5 12 4s1.999-5-1.001-4"/><circle cx="14" cy="21" r="2" fill="#292f33"/><circle cx="22" cy="21" r="2" fill="#292f33"/></svg>
React
import type { SVGProps } from "react";
export function TwemojiOctopus(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#553788" d="M10 12c3 5 0 10.692-3 9.692s-4 2-1 3s9.465-.465 13-4c1-1 2-1 2-1z"/><path fill="#553788" d="M26 12c-3 5 0 10.692 3 9.692s4 2 1 3s-9.465-.465-13-4c-1-1-2-1-2-1z"/><path fill="#744eaa" d="M30.188 16c-3 5 0 10.692 3 9.692s4 2 1 3s-9.465-.465-13-4c-1-1-2-1-2-1zM5.812 16c3 5 0 10.692-3 9.692s-4 2-1 3s9.465-.465 13-4c1-1 2-1 2-1z"/><path fill="#9266cc" d="M33.188 31.375c-2.729.91-6.425-5.626-4.812-10.578C30.022 17.554 31 13.94 31 11c0-7.18-5.82-11-13-11S5 3.82 5 11c0 2.94.978 6.554 2.624 9.797c1.613 4.952-2.083 11.488-4.812 10.578c-3-1-4 3-1 4s8.31-.627 12-4c2.189-2 4.189-2 4.189-2s2 0 4.188 2c3.69 3.373 9 5 12 4s1.999-5-1.001-4"/><circle cx="14" cy="21" r="2" fill="#292f33"/><circle cx="22" cy="21" r="2" fill="#292f33"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#553788" d="M10 12c3 5 0 10.692-3 9.692s-4 2-1 3s9.465-.465 13-4c1-1 2-1 2-1z"/><path fill="#553788" d="M26 12c-3 5 0 10.692 3 9.692s4 2 1 3s-9.465-.465-13-4c-1-1-2-1-2-1z"/><path fill="#744eaa" d="M30.188 16c-3 5 0 10.692 3 9.692s4 2 1 3s-9.465-.465-13-4c-1-1-2-1-2-1zM5.812 16c3 5 0 10.692-3 9.692s-4 2-1 3s9.465-.465 13-4c1-1 2-1 2-1z"/><path fill="#9266cc" d="M33.188 31.375c-2.729.91-6.425-5.626-4.812-10.578C30.022 17.554 31 13.94 31 11c0-7.18-5.82-11-13-11S5 3.82 5 11c0 2.94.978 6.554 2.624 9.797c1.613 4.952-2.083 11.488-4.812 10.578c-3-1-4 3-1 4s8.31-.627 12-4c2.189-2 4.189-2 4.189-2s2 0 4.188 2c3.69 3.373 9 5 12 4s1.999-5-1.001-4"/><circle cx="14" cy="21" r="2" fill="#292f33"/><circle cx="22" cy="21" r="2" fill="#292f33"/></svg> </template>
CSS
.icon-octopus {
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%2036%2036%22%3E%3Cpath%20fill%3D%22%23553788%22%20d%3D%22M10%2012c3%205%200%2010.692-3%209.692s-4%202-1%203s9.465-.465%2013-4c1-1%202-1%202-1z%22%2F%3E%3Cpath%20fill%3D%22%23553788%22%20d%3D%22M26%2012c-3%205%200%2010.692%203%209.692s4%202%201%203s-9.465-.465-13-4c-1-1-2-1-2-1z%22%2F%3E%3Cpath%20fill%3D%22%23744eaa%22%20d%3D%22M30.188%2016c-3%205%200%2010.692%203%209.692s4%202%201%203s-9.465-.465-13-4c-1-1-2-1-2-1zM5.812%2016c3%205%200%2010.692-3%209.692s-4%202-1%203s9.465-.465%2013-4c1-1%202-1%202-1z%22%2F%3E%3Cpath%20fill%3D%22%239266cc%22%20d%3D%22M33.188%2031.375c-2.729.91-6.425-5.626-4.812-10.578C30.022%2017.554%2031%2013.94%2031%2011c0-7.18-5.82-11-13-11S5%203.82%205%2011c0%202.94.978%206.554%202.624%209.797c1.613%204.952-2.083%2011.488-4.812%2010.578c-3-1-4%203-1%204s8.31-.627%2012-4c2.189-2%204.189-2%204.189-2s2%200%204.188%202c3.69%203.373%209%205%2012%204s1.999-5-1.001-4%22%2F%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2221%22%20r%3D%222%22%20fill%3D%22%23292f33%22%2F%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2221%22%20r%3D%222%22%20fill%3D%22%23292f33%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%2036%2036%22%3E%3Cpath%20fill%3D%22%23553788%22%20d%3D%22M10%2012c3%205%200%2010.692-3%209.692s-4%202-1%203s9.465-.465%2013-4c1-1%202-1%202-1z%22%2F%3E%3Cpath%20fill%3D%22%23553788%22%20d%3D%22M26%2012c-3%205%200%2010.692%203%209.692s4%202%201%203s-9.465-.465-13-4c-1-1-2-1-2-1z%22%2F%3E%3Cpath%20fill%3D%22%23744eaa%22%20d%3D%22M30.188%2016c-3%205%200%2010.692%203%209.692s4%202%201%203s-9.465-.465-13-4c-1-1-2-1-2-1zM5.812%2016c3%205%200%2010.692-3%209.692s-4%202-1%203s9.465-.465%2013-4c1-1%202-1%202-1z%22%2F%3E%3Cpath%20fill%3D%22%239266cc%22%20d%3D%22M33.188%2031.375c-2.729.91-6.425-5.626-4.812-10.578C30.022%2017.554%2031%2013.94%2031%2011c0-7.18-5.82-11-13-11S5%203.82%205%2011c0%202.94.978%206.554%202.624%209.797c1.613%204.952-2.083%2011.488-4.812%2010.578c-3-1-4%203-1%204s8.31-.627%2012-4c2.189-2%204.189-2%204.189-2s2%200%204.188%202c3.69%203.373%209%205%2012%204s1.999-5-1.001-4%22%2F%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2221%22%20r%3D%222%22%20fill%3D%22%23292f33%22%2F%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2221%22%20r%3D%222%22%20fill%3D%22%23292f33%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/twemoji/octopus.svg?color=%231a73e8&size=48
