Kaaba icon
emojione:kaaba
The Kaaba icon (emojione:kaaba) is a free SVG icon from the Emoji One (Colored) set by Emoji One. It is drawn on a 64 × 64 grid. Emoji One (Colored) icons are released under the CC BY 4.0 license, which allows use in personal and commercial projects as long as you credit the author. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.
- Icon set
- Emoji One (Colored)
- Author
- Emoji One
- License
- CC-BY-4.0
- Size
- 64 × 64
- Category
- Travel
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><defs><path id="SVG8vCTrdeE" d="M33.2 44.5H62v10H33.2zm-18.7 0h8.8v10h-8.8z"/></defs><g fill="#3e4347"><path d="M14.5 62L2 49.5V2l12.5 12.5zm0-47.5H62V62H14.5z"/><path d="M62 14.5H14.5L2 2h47.5z"/></g><path fill="#e8e8e8" d="M15.5 12H56l-7.5-7.5H8z"/><path fill="#b2c1c0" d="m10.5 7l5 5h36.7l-5-5z"/><path fill="#dbb471" d="M14.5 29.5H62v5H14.5z"/><path fill="#b2c1c0" d="M14.5 62L2 49.5V2l12.5 12.5z" opacity=".33"/><path fill="#fbbf67" d="M14.5 34.5L2 22v-5l12.5 12.5z"/><path fill="#dbb471" d="M39.5 37h13.8v5H39.5zm20 0H62v5h-2.5zm-45 0H17v5h-2.5zm23.2 1.6c-.6-.6-.3-1.1-.3-1.1l-1-.5l-1.1.5s.3.5-.3 1.1c-.3.3-.5.6-.5 1.1c0 .4.3.7.5 1c.3.6.7 1.3 1.4 1.3s1.1-.6 1.4-1.3c.2-.3.5-.6.5-1c-.1-.5-.3-.8-.6-1.1m-16.2 0c-.6-.6-.3-1.1-.3-1.1l-1.1-.5l-1.1.5s.3.5-.3 1.1c-.3.3-.5.6-.5 1.1c0 .4.3.7.5 1c.3.6.7 1.3 1.4 1.3s1.1-.6 1.4-1.3c.2-.3.5-.6.5-1c0-.5-.2-.8-.5-1.1m36.2 0c-.6-.6-.3-1.1-.3-1.1l-1-.5l-1.1.5s.3.5-.3 1.1c-.3.3-.5.6-.5 1.1c0 .4.3.7.5 1c.3.6.7 1.3 1.4 1.3s1.1-.6 1.4-1.3c.2-.3.5-.6.5-1c-.1-.5-.3-.8-.6-1.1"/><path fill="#fbbf67" d="M13.2 35.8v5l1.3 1.2v-5z"/><use href="#SVG8vCTrdeE" fill="#e8e8e8"/><path fill="#fbbf67" d="M12.5 36.5c-.2-.8-.1-1.2-.1-1.2l-.4-.8l-.4.1s.1.6-.1 1c-.1.2-.2.5-.2.9s.1.8.2 1.2c.1.7.2 1.5.5 1.7c.2.2.4-.3.5-.8c.1-.3.2-.5.2-.9c-.1-.4-.2-.8-.2-1.2m-5-5c-.2-.8-.1-1.2-.1-1.2l-.4-.8l-.4.1s.1.6-.1 1c-.1.2-.2.5-.2.9s.1.8.2 1.2c.1.7.2 1.5.5 1.7c.2.2.4-.3.5-.8c.1-.3.2-.5.2-.9c-.1-.4-.2-.8-.2-1.2m.7-.7v5l2.5 2.4v-5zm-5-5v5l2.6 2.4v-5z"/><path fill="#e8e8e8" d="m2 42l12.5 12.5v-10L2 32z"/><use href="#SVG8vCTrdeE" fill="#3e4347" opacity=".2"/><path fill="#dbb471" d="M14.5 54.5H62V62H14.5z"/><path fill="#3e4347" d="M14.5 54.5H62V62H14.5z" opacity=".5"/><path fill="#dbb471" d="M14.5 62L2 49.5V42l12.5 12.5z"/><path fill="#3e4347" d="M14.5 62L2 49.5V42l12.5 12.5z" opacity=".25"/><path fill="#ffce31" d="M23.2 42h10v17.5h-10z"/><g fill="#f2b200"><path d="M23.2 58.2h10v1.2h-10z"/><path d="M32 37h1.2v22.5H32z"/></g><path fill="#dbb471" d="M23.2 37v17.5h4.3l.7-5l.8 5h4.2V37z"/><g fill="#fff"><path d="M30.8 47h-5.1l-1.2-1.2l1.2-1.3h5.1l1.2 1.3z" opacity=".33"/><circle cx="30.8" cy="50.8" r="1.3" opacity=".33"/><circle cx="25.8" cy="50.8" r="1.2" opacity=".33"/><path d="M25.8 41c-.2-.2-.1-.4-.1-.4l-.4-.2l-.4.2s.1.2-.1.4c-.1.1-.2.3-.2.4c0 .2.1.3.2.4c.1.3.3.5.6.5s.4-.3.6-.5c.1-.1.2-.3.2-.4c-.2-.1-.3-.3-.4-.4m2 0c-.2-.2-.1-.4-.1-.4l-.4-.2l-.4.2s.1.2-.1.4c-.1.1-.2.3-.2.4c0 .2.1.3.2.4c.1.3.3.5.6.5s.4-.3.6-.5c.1-.1.2-.3.2-.4c-.2-.1-.3-.3-.4-.4m2 0c-.2-.2-.1-.4-.1-.4l-.4-.2l-.4.2s.1.2-.1.4c-.1.1-.2.3-.2.4c0 .2.1.3.2.4c.1.3.3.5.6.5s.4-.3.6-.5c.1-.1.2-.3.2-.4c-.2-.1-.3-.3-.4-.4m2 0c-.2-.2-.1-.4-.1-.4l-.4-.2l-.4.2s.1.2-.1.4c-.1.1-.2.3-.2.4c0 .2.1.3.2.4c.1.3.3.5.6.5s.4-.3.6-.5c.1-.1.2-.3.2-.4c-.2-.1-.3-.3-.4-.4" opacity=".33"/></g><path fill="#dbb471" d="m14.5 59.3l-1.7-1.7v-2.1l1.7 1.7v-.4l-3.6-3.6v-2.3l-.3-.3v2.3l-2.2-2.2v-2.3l-.3-.3v2.3L4.7 47v-2.3l-.3-.3v2.3L2 44.3v.4l.8.8v2.1l-.8-.8v.4l2.3 2.3v2.3l.3.3v-2.3L6.8 52v2.3l.3.3v-2.3l4.1 4.1v2.3l.3.3v-2.3l3 3zm-8.9-8.9l-2.5-2.5v-2.1l2.5 2.5zm3.7 3.7l-3.4-3.4v-2.1L9.3 52zm3.2 3.1l-2.8-2.8v-2.1l2.8 2.8zm49.5 0v-.3h-5.5v-2.3h-.3v2.3h-4.8v-2.3h-.3v2.3h-4.6v-2.3h-.3v2.3h-4.1v-2.3h-.3v2.3h-5.3v-2.3h-.3v2.3h-3v.3H38v2.2H20.3v-2.2h3v-.3h-4.8v-2.3h-.3v2.3h-3.6v.3H20v2.2h-5.5v.3h1.1V62h.3v-2.3h5.9V62h.3v-2.3H27V62h.3v-2.3H31V62h.3v-2.3h2.9V62h.3v-2.3H40V62h.3v-2.3h5V62h.3v-2.3H51V62h.3v-2.3h4.8V62h.3v-2.3H62v-.3h-3.6v-2.2zm-18.3 2.1h-5.3v-2.2h5.3zm3.8 0H44v-2.2h3.4zm5.6 0h-5.3v-2.2h5.3zm5 0h-4.7v-2.2h4.7z"/></svg>How to use the Kaaba icon
React
import { Icon } from "@iconify/react";
<Icon icon="emojione:kaaba" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="emojione:kaaba" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="emojione:kaaba" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[emojione--kaaba]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/emojione -->
<div class="i-emojione:kaaba"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="emojione:kaaba"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/emojione/kaaba.svg" alt="Kaaba icon" width="24" height="24">Kaaba icon in other icon sets
Kaaba icon FAQ
Is the Kaaba icon free for commercial use?
Yes. Emoji One (Colored) icons are released under the CC BY 4.0 license, which allows use in personal and commercial projects as long as you credit the author.
How do I use the Kaaba icon in React?
Install @iconify/react and render <Icon icon="emojione:kaaba" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Kaaba icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/emojione/kaaba.svg" alt="Kaaba icon">, or paste the SVG code inline to style it with CSS.