composition icon
composition from IconPark by ByteDance · Color · Health · Apache-2.0 Free for personal and commercial use.
- Name
- composition
- Set
- IconPark
- Style
- Color
- Category
- Health
- Viewbox
- 48×48
- License
- Apache 2.0
The same icon in other sets
More health icons from IconPark
Use the composition icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path fill="#2F88FF" fill-rule="evenodd" d="M39.8281 21.7859L21.9686 39.6454C18.5544 43.0597 12.9373 42.9783 9.42255 39.4636C5.90784 35.9489 5.82643 30.3318 9.24073 26.9175L27.1002 9.05798" clip-rule="evenodd"/><path stroke="#000" stroke-linecap="round" stroke-width="4" d="M39.8281 21.7859L21.9686 39.6454C18.5544 43.0597 12.9373 42.9783 9.42255 39.4636C5.90784 35.9489 5.82643 30.3318 9.24073 26.9175L27.1002 9.05798"/><path stroke="#000" stroke-linecap="round" stroke-width="4" d="M8.73438 27.4238L34.8784 26.7356"/><path fill="#fff" d="M29.393 20.9069C30.1741 20.1258 30.1741 18.8595 29.393 18.0785C28.612 17.2974 27.3457 17.2974 26.5646 18.0785C25.7836 18.8595 25.7836 20.1258 26.5646 20.9069C27.3457 21.6879 28.612 21.6879 29.393 20.9069Z"/><path fill="#fff" d="M23.7358 23.7355C24.5169 22.9545 24.5169 21.6881 23.7358 20.9071C22.9548 20.126 21.6884 20.126 20.9074 20.9071C20.1263 21.6881 20.1263 22.9545 20.9074 23.7355C21.6884 24.5166 22.9548 24.5166 23.7358 23.7355Z"/><path stroke="#000" stroke-linecap="round" stroke-width="4" d="M23.5645 5.52246L43.3634 25.3215"/></g></svg>
React
import type { SVGProps } from "react";
export function IconParkComposition(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path fill="#2F88FF" fillRule="evenodd" d="M39.8281 21.7859L21.9686 39.6454C18.5544 43.0597 12.9373 42.9783 9.42255 39.4636C5.90784 35.9489 5.82643 30.3318 9.24073 26.9175L27.1002 9.05798" clipRule="evenodd"/><path stroke="#000" strokeLinecap="round" strokeWidth="4" d="M39.8281 21.7859L21.9686 39.6454C18.5544 43.0597 12.9373 42.9783 9.42255 39.4636C5.90784 35.9489 5.82643 30.3318 9.24073 26.9175L27.1002 9.05798"/><path stroke="#000" strokeLinecap="round" strokeWidth="4" d="M8.73438 27.4238L34.8784 26.7356"/><path fill="#fff" d="M29.393 20.9069C30.1741 20.1258 30.1741 18.8595 29.393 18.0785C28.612 17.2974 27.3457 17.2974 26.5646 18.0785C25.7836 18.8595 25.7836 20.1258 26.5646 20.9069C27.3457 21.6879 28.612 21.6879 29.393 20.9069Z"/><path fill="#fff" d="M23.7358 23.7355C24.5169 22.9545 24.5169 21.6881 23.7358 20.9071C22.9548 20.126 21.6884 20.126 20.9074 20.9071C20.1263 21.6881 20.1263 22.9545 20.9074 23.7355C21.6884 24.5166 22.9548 24.5166 23.7358 23.7355Z"/><path stroke="#000" strokeLinecap="round" strokeWidth="4" d="M23.5645 5.52246L43.3634 25.3215"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path fill="#2F88FF" fill-rule="evenodd" d="M39.8281 21.7859L21.9686 39.6454C18.5544 43.0597 12.9373 42.9783 9.42255 39.4636C5.90784 35.9489 5.82643 30.3318 9.24073 26.9175L27.1002 9.05798" clip-rule="evenodd"/><path stroke="#000" stroke-linecap="round" stroke-width="4" d="M39.8281 21.7859L21.9686 39.6454C18.5544 43.0597 12.9373 42.9783 9.42255 39.4636C5.90784 35.9489 5.82643 30.3318 9.24073 26.9175L27.1002 9.05798"/><path stroke="#000" stroke-linecap="round" stroke-width="4" d="M8.73438 27.4238L34.8784 26.7356"/><path fill="#fff" d="M29.393 20.9069C30.1741 20.1258 30.1741 18.8595 29.393 18.0785C28.612 17.2974 27.3457 17.2974 26.5646 18.0785C25.7836 18.8595 25.7836 20.1258 26.5646 20.9069C27.3457 21.6879 28.612 21.6879 29.393 20.9069Z"/><path fill="#fff" d="M23.7358 23.7355C24.5169 22.9545 24.5169 21.6881 23.7358 20.9071C22.9548 20.126 21.6884 20.126 20.9074 20.9071C20.1263 21.6881 20.1263 22.9545 20.9074 23.7355C21.6884 24.5166 22.9548 24.5166 23.7358 23.7355Z"/><path stroke="#000" stroke-linecap="round" stroke-width="4" d="M23.5645 5.52246L43.3634 25.3215"/></g></svg> </template>
CSS
.icon-composition {
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%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%232F88FF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M39.8281%2021.7859L21.9686%2039.6454C18.5544%2043.0597%2012.9373%2042.9783%209.42255%2039.4636C5.90784%2035.9489%205.82643%2030.3318%209.24073%2026.9175L27.1002%209.05798%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M39.8281%2021.7859L21.9686%2039.6454C18.5544%2043.0597%2012.9373%2042.9783%209.42255%2039.4636C5.90784%2035.9489%205.82643%2030.3318%209.24073%2026.9175L27.1002%209.05798%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M8.73438%2027.4238L34.8784%2026.7356%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M29.393%2020.9069C30.1741%2020.1258%2030.1741%2018.8595%2029.393%2018.0785C28.612%2017.2974%2027.3457%2017.2974%2026.5646%2018.0785C25.7836%2018.8595%2025.7836%2020.1258%2026.5646%2020.9069C27.3457%2021.6879%2028.612%2021.6879%2029.393%2020.9069Z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M23.7358%2023.7355C24.5169%2022.9545%2024.5169%2021.6881%2023.7358%2020.9071C22.9548%2020.126%2021.6884%2020.126%2020.9074%2020.9071C20.1263%2021.6881%2020.1263%2022.9545%2020.9074%2023.7355C21.6884%2024.5166%2022.9548%2024.5166%2023.7358%2023.7355Z%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M23.5645%205.52246L43.3634%2025.3215%22%2F%3E%3C%2Fg%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%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%232F88FF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M39.8281%2021.7859L21.9686%2039.6454C18.5544%2043.0597%2012.9373%2042.9783%209.42255%2039.4636C5.90784%2035.9489%205.82643%2030.3318%209.24073%2026.9175L27.1002%209.05798%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M39.8281%2021.7859L21.9686%2039.6454C18.5544%2043.0597%2012.9373%2042.9783%209.42255%2039.4636C5.90784%2035.9489%205.82643%2030.3318%209.24073%2026.9175L27.1002%209.05798%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M8.73438%2027.4238L34.8784%2026.7356%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M29.393%2020.9069C30.1741%2020.1258%2030.1741%2018.8595%2029.393%2018.0785C28.612%2017.2974%2027.3457%2017.2974%2026.5646%2018.0785C25.7836%2018.8595%2025.7836%2020.1258%2026.5646%2020.9069C27.3457%2021.6879%2028.612%2021.6879%2029.393%2020.9069Z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M23.7358%2023.7355C24.5169%2022.9545%2024.5169%2021.6881%2023.7358%2020.9071C22.9548%2020.126%2021.6884%2020.126%2020.9074%2020.9071C20.1263%2021.6881%2020.1263%2022.9545%2020.9074%2023.7355C21.6884%2024.5166%2022.9548%2024.5166%2023.7358%2023.7355Z%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M23.5645%205.52246L43.3634%2025.3215%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/icon-park/composition.svg?color=%231a73e8&size=48
