compose icon

compose from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.

Name: compose
Set: IonIcons
Style: Regular
Viewbox: 512×512
License: MIT

The same icon in other sets

compose-12-filledFluent UI System Icons composeSVG Logos compose-16Octicons composeOpenMoji

Use the compose icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M442.8 99.6l-30.4-30.4c-7-6.9-18.2-6.9-25.1 0L355.5 101l55.5 55.5 31.8-31.7c6.9-7.1 6.9-18.3 0-25.2z" fill="currentColor"/><path d="M346.1 110.5L174.1 288 160 352l64-14.1 176.6-173z" fill="currentColor"/><path d="M384 256v150c0 5.1-3.9 10.1-9.2 10.1s-269-.1-269-.1c-5.6 0-9.8-5.4-9.8-10V138c0-5 4.7-10 10.6-10H256l32-32H87.4c-13 0-23.4 10.3-23.4 23.3v305.3c0 12.9 10.5 23.4 23.4 23.4h305.3c12.9 0 23.3-10.5 23.3-23.4V224l-32 32z" fill="currentColor"/></svg>

React

import type { SVGProps } from "react";

export function IonCompose(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M442.8 99.6l-30.4-30.4c-7-6.9-18.2-6.9-25.1 0L355.5 101l55.5 55.5 31.8-31.7c6.9-7.1 6.9-18.3 0-25.2z" fill="currentColor"/><path d="M346.1 110.5L174.1 288 160 352l64-14.1 176.6-173z" fill="currentColor"/><path d="M384 256v150c0 5.1-3.9 10.1-9.2 10.1s-269-.1-269-.1c-5.6 0-9.8-5.4-9.8-10V138c0-5 4.7-10 10.6-10H256l32-32H87.4c-13 0-23.4 10.3-23.4 23.3v305.3c0 12.9 10.5 23.4 23.4 23.4h305.3c12.9 0 23.3-10.5 23.3-23.4V224l-32 32z" fill="currentColor"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M442.8 99.6l-30.4-30.4c-7-6.9-18.2-6.9-25.1 0L355.5 101l55.5 55.5 31.8-31.7c6.9-7.1 6.9-18.3 0-25.2z" fill="currentColor"/><path d="M346.1 110.5L174.1 288 160 352l64-14.1 176.6-173z" fill="currentColor"/><path d="M384 256v150c0 5.1-3.9 10.1-9.2 10.1s-269-.1-269-.1c-5.6 0-9.8-5.4-9.8-10V138c0-5 4.7-10 10.6-10H256l32-32H87.4c-13 0-23.4 10.3-23.4 23.3v305.3c0 12.9 10.5 23.4 23.4 23.4h305.3c12.9 0 23.3-10.5 23.3-23.4V224l-32 32z" fill="currentColor"/></svg>
</template>

CSS

.icon-compose {
  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%20512%20512%22%3E%3Cpath%20d%3D%22M442.8%2099.6l-30.4-30.4c-7-6.9-18.2-6.9-25.1%200L355.5%20101l55.5%2055.5%2031.8-31.7c6.9-7.1%206.9-18.3%200-25.2z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M346.1%20110.5L174.1%20288%20160%20352l64-14.1%20176.6-173z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M384%20256v150c0%205.1-3.9%2010.1-9.2%2010.1s-269-.1-269-.1c-5.6%200-9.8-5.4-9.8-10V138c0-5%204.7-10%2010.6-10H256l32-32H87.4c-13%200-23.4%2010.3-23.4%2023.3v305.3c0%2012.9%2010.5%2023.4%2023.4%2023.4h305.3c12.9%200%2023.3-10.5%2023.3-23.4V224l-32%2032z%22%20fill%3D%22currentColor%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%20512%20512%22%3E%3Cpath%20d%3D%22M442.8%2099.6l-30.4-30.4c-7-6.9-18.2-6.9-25.1%200L355.5%20101l55.5%2055.5%2031.8-31.7c6.9-7.1%206.9-18.3%200-25.2z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M346.1%20110.5L174.1%20288%20160%20352l64-14.1%20176.6-173z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M384%20256v150c0%205.1-3.9%2010.1-9.2%2010.1s-269-.1-269-.1c-5.6%200-9.8-5.4-9.8-10V138c0-5%204.7-10%2010.6-10H256l32-32H87.4c-13%200-23.4%2010.3-23.4%2023.3v305.3c0%2012.9%2010.5%2023.4%2023.4%2023.4h305.3c12.9%200%2023.3-10.5%2023.3-23.4V224l-32%2032z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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