Elementary icon
logos:elementary
The Elementary icon (logos:elementary) is a free SVG icon from the SVG Logos set by Gil Barbara. It is drawn on a 256 × 256 grid. SVG Logos icons are released under the CC0 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
- SVG Logos
- Author
- Gil Barbara
- License
- CC0-1.0
- Size
- 256 × 256
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><path fill="#333" d="M128 0C57.307 0 0 57.307 0 128s57.307 128 128 128s128-57.307 128-128S198.693 0 128 0m0 10.66c53.742 0 99.054 36.115 112.942 85.395c-11.932 24.686-28.983 46.903-49.692 64.878c-9.965 8.621-20.845 16.31-32.86 21.723c-12.013 5.413-25.233 8.485-38.4 7.735c-9.873-.576-19.656-3.328-28.287-8.137c22.948-12.435 43.639-29.001 60.58-48.841c11.155-13.029 20.846-27.84 24.595-44.554c1.901-8.356 2.194-17.097.457-25.49s-5.614-16.366-11.484-22.62c-5.732-6.088-13.257-10.422-21.32-12.635c-8.046-2.221-16.64-2.395-24.87-.896c-16.456 3.017-31.176 12.58-42.943 24.457c-20.782 20.938-33.628 50.487-31.269 79.89c1.189 14.702 6.108 29.148 14.537 41.235a77 77 0 0 0 6.18 7.707a191 191 0 0 1-37.942 9.116c-11.09-17.92-17.5-39.04-17.5-61.65c0-64.823 52.517-117.34 117.322-117.34zm.731 23.68c8.266 0 16.567 2.506 23.15 7.498c5.925 4.48 10.332 10.825 12.8 17.828c2.496 7.004 3.136 14.601 2.286 21.989c-1.692 14.766-9.143 28.306-18.14 40.137c-15.936 20.937-37.12 37.696-60.672 49.435a198 198 0 0 1-7.314 3.438c-5.12-4.48-9.508-9.783-12.873-15.726c-6.994-12.397-9.298-27.108-7.954-41.27c1.371-14.172 6.217-27.813 12.754-40.458c7.57-14.656 17.893-28.525 32.338-36.507c7.223-3.995 15.388-6.4 23.635-6.4zm115.548 77.916a119 119 0 0 1 1.051 15.707c0 64.805-52.498 117.34-117.303 117.34c-36.388 0-68.937-16.567-90.422-42.578c13.275-3.018 26.258-7.36 38.71-12.874c5.459 4.133 11.466 7.534 17.866 9.984c18.404 7.059 39.314 6.035 57.947-.411c18.624-6.455 35.154-18.011 49.554-31.497a213.2 213.2 0 0 0 42.643-55.68z"/></svg>How to use the Elementary icon
React
import { Icon } from "@iconify/react";
<Icon icon="logos:elementary" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="logos:elementary" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="logos:elementary" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[logos--elementary]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/logos -->
<div class="i-logos:elementary"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="logos:elementary"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/logos/elementary.svg" alt="Elementary icon" width="24" height="24">Elementary icon in other icon sets
Elementary icon FAQ
Is the Elementary icon free for commercial use?
Yes. SVG Logos icons are released under the CC0 license, which allows use in personal and commercial projects.
How do I use the Elementary icon in React?
Install @iconify/react and render <Icon icon="logos:elementary" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Elementary icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/logos/elementary.svg" alt="Elementary icon">, or paste the SVG code inline to style it with CSS.