Compose icon
logos:compose
The Compose icon (logos:compose) is a free SVG icon from the SVG Logos set by Gil Barbara. It is drawn on a 256 × 148 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 × 148
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="148" viewBox="0 0 256 148"><g fill="#038dc8"><path d="M202.368 29.568h-.128L152.576.64l-49.024 28.544L53.248 0L0 30.976v56.32L102.784 147.2l49.152-28.416l50.432 29.184L256 116.992v-56.32zm-.256 57.728L160 62.848l42.496-24.832l42.112 24.704zM102.4 37.632l42.496 24.576l-41.984 24.448l-42.368-24.704zm92.416-3.84l-41.6 24.192l-42.368-24.576l41.728-24.32zm-99.2-.768l-8.576 4.992L52.352 57.6L11.008 33.024L53.376 8.448zM7.424 39.168l41.6 25.088v44.288L7.424 83.2zm49.92 29.44l41.6 24.704v44.16l-41.6-24.704zm98.944.512l42.368 24.96v43.776l-42.368-25.216z"/><path d="m57.344 112.896l41.6 24.448V93.312l-41.6-24.704zM7.424 83.072l41.6 25.344v-44.16l-41.6-25.088zm148.864 29.696l42.368 25.216V94.08l-42.368-24.96z" opacity=".5"/></g></svg>
How to use the Compose icon
React
import { Icon } from "@iconify/react";
<Icon icon="logos:compose" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="logos:compose" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="logos:compose" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[logos--compose]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/logos -->
<div class="i-logos:compose"></div>
Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="logos:compose"></iconify-icon>
HTML image
<img src="https://iconyz.com/api/public/svg/logos/compose.svg" alt="Compose icon" width="24" height="24">
Related icons in SVG Logos
Compose icon in other icon sets
Compose icon FAQ
Is the Compose 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 Compose icon in React?
Install @iconify/react and render <Icon icon="logos:compose" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Compose icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/logos/compose.svg" alt="Compose icon">, or paste the SVG code inline to style it with CSS.
Browse all SVG Logos icons →
ICONYZ
