six circular connection icon
six-circular-connection from IconPark by ByteDance · Color · Abstract · Apache-2.0 Free for personal and commercial use.
- Name
- six-circular-connection
- Set
- IconPark
- Style
- Color
- Category
- Abstract
- Viewbox
- 48×48
- License
- Apache 2.0
The same icon in other sets
More abstract icons from IconPark
Use the six circular connection icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path d="M37.8564 20V24V28"/><path d="M27.4639 38L30.928 36L34.3921 34"/><path d="M20.5356 38L17.0715 36L13.6074 34"/><path d="M10.1436 20V24V28"/><path d="M13.6074 14L17.0715 12L20.5356 10"/><path d="M27.4639 10L30.928 12L34.3921 14"/><path fill="#2F88FF" d="M24 44C26.2091 44 28 42.2091 28 40C28 37.7909 26.2091 36 24 36C21.7909 36 20 37.7909 20 40C20 42.2091 21.7909 44 24 44Z"/><path fill="#2F88FF" d="M24 12C26.2091 12 28 10.2091 28 8C28 5.79086 26.2091 4 24 4C21.7909 4 20 5.79086 20 8C20 10.2091 21.7909 12 24 12Z"/><path fill="#2F88FF" d="M24 28C26.2091 28 28 26.2091 28 24C28 21.7909 26.2091 20 24 20C21.7909 20 20 21.7909 20 24C20 26.2091 21.7909 28 24 28Z"/><path fill="#2F88FF" d="M38 20C40.2091 20 42 18.2091 42 16C42 13.7909 40.2091 12 38 12C35.7909 12 34 13.7909 34 16C34 18.2091 35.7909 20 38 20Z"/><path fill="#2F88FF" d="M38 36C40.2091 36 42 34.2091 42 32C42 29.7909 40.2091 28 38 28C35.7909 28 34 29.7909 34 32C34 34.2091 35.7909 36 38 36Z"/><path fill="#2F88FF" d="M10 20C12.2091 20 14 18.2091 14 16C14 13.7909 12.2091 12 10 12C7.79086 12 6 13.7909 6 16C6 18.2091 7.79086 20 10 20Z"/><path fill="#2F88FF" d="M10 36C12.2091 36 14 34.2091 14 32C14 29.7909 12.2091 28 10 28C7.79086 28 6 29.7909 6 32C6 34.2091 7.79086 36 10 36Z"/></g></svg>
React
import type { SVGProps } from "react";
export function IconParkSixCircularConnection(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" stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4"><path d="M37.8564 20V24V28"/><path d="M27.4639 38L30.928 36L34.3921 34"/><path d="M20.5356 38L17.0715 36L13.6074 34"/><path d="M10.1436 20V24V28"/><path d="M13.6074 14L17.0715 12L20.5356 10"/><path d="M27.4639 10L30.928 12L34.3921 14"/><path fill="#2F88FF" d="M24 44C26.2091 44 28 42.2091 28 40C28 37.7909 26.2091 36 24 36C21.7909 36 20 37.7909 20 40C20 42.2091 21.7909 44 24 44Z"/><path fill="#2F88FF" d="M24 12C26.2091 12 28 10.2091 28 8C28 5.79086 26.2091 4 24 4C21.7909 4 20 5.79086 20 8C20 10.2091 21.7909 12 24 12Z"/><path fill="#2F88FF" d="M24 28C26.2091 28 28 26.2091 28 24C28 21.7909 26.2091 20 24 20C21.7909 20 20 21.7909 20 24C20 26.2091 21.7909 28 24 28Z"/><path fill="#2F88FF" d="M38 20C40.2091 20 42 18.2091 42 16C42 13.7909 40.2091 12 38 12C35.7909 12 34 13.7909 34 16C34 18.2091 35.7909 20 38 20Z"/><path fill="#2F88FF" d="M38 36C40.2091 36 42 34.2091 42 32C42 29.7909 40.2091 28 38 28C35.7909 28 34 29.7909 34 32C34 34.2091 35.7909 36 38 36Z"/><path fill="#2F88FF" d="M10 20C12.2091 20 14 18.2091 14 16C14 13.7909 12.2091 12 10 12C7.79086 12 6 13.7909 6 16C6 18.2091 7.79086 20 10 20Z"/><path fill="#2F88FF" d="M10 36C12.2091 36 14 34.2091 14 32C14 29.7909 12.2091 28 10 28C7.79086 28 6 29.7909 6 32C6 34.2091 7.79086 36 10 36Z"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path d="M37.8564 20V24V28"/><path d="M27.4639 38L30.928 36L34.3921 34"/><path d="M20.5356 38L17.0715 36L13.6074 34"/><path d="M10.1436 20V24V28"/><path d="M13.6074 14L17.0715 12L20.5356 10"/><path d="M27.4639 10L30.928 12L34.3921 14"/><path fill="#2F88FF" d="M24 44C26.2091 44 28 42.2091 28 40C28 37.7909 26.2091 36 24 36C21.7909 36 20 37.7909 20 40C20 42.2091 21.7909 44 24 44Z"/><path fill="#2F88FF" d="M24 12C26.2091 12 28 10.2091 28 8C28 5.79086 26.2091 4 24 4C21.7909 4 20 5.79086 20 8C20 10.2091 21.7909 12 24 12Z"/><path fill="#2F88FF" d="M24 28C26.2091 28 28 26.2091 28 24C28 21.7909 26.2091 20 24 20C21.7909 20 20 21.7909 20 24C20 26.2091 21.7909 28 24 28Z"/><path fill="#2F88FF" d="M38 20C40.2091 20 42 18.2091 42 16C42 13.7909 40.2091 12 38 12C35.7909 12 34 13.7909 34 16C34 18.2091 35.7909 20 38 20Z"/><path fill="#2F88FF" d="M38 36C40.2091 36 42 34.2091 42 32C42 29.7909 40.2091 28 38 28C35.7909 28 34 29.7909 34 32C34 34.2091 35.7909 36 38 36Z"/><path fill="#2F88FF" d="M10 20C12.2091 20 14 18.2091 14 16C14 13.7909 12.2091 12 10 12C7.79086 12 6 13.7909 6 16C6 18.2091 7.79086 20 10 20Z"/><path fill="#2F88FF" d="M10 36C12.2091 36 14 34.2091 14 32C14 29.7909 12.2091 28 10 28C7.79086 28 6 29.7909 6 32C6 34.2091 7.79086 36 10 36Z"/></g></svg> </template>
CSS
.icon-six-circular-connection {
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%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%3E%3Cpath%20d%3D%22M37.8564%2020V24V28%22%2F%3E%3Cpath%20d%3D%22M27.4639%2038L30.928%2036L34.3921%2034%22%2F%3E%3Cpath%20d%3D%22M20.5356%2038L17.0715%2036L13.6074%2034%22%2F%3E%3Cpath%20d%3D%22M10.1436%2020V24V28%22%2F%3E%3Cpath%20d%3D%22M13.6074%2014L17.0715%2012L20.5356%2010%22%2F%3E%3Cpath%20d%3D%22M27.4639%2010L30.928%2012L34.3921%2014%22%2F%3E%3Cpath%20fill%3D%22%232F88FF%22%20d%3D%22M24%2044C26.2091%2044%2028%2042.2091%2028%2040C28%2037.7909%2026.2091%2036%2024%2036C21.7909%2036%2020%2037.7909%2020%2040C20%2042.2091%2021.7909%2044%2024%2044Z%22%2F%3E%3Cpath%20fill%3D%22%232F88FF%22%20d%3D%22M24%2012C26.2091%2012%2028%2010.2091%2028%208C28%205.79086%2026.2091%204%2024%204C21.7909%204%2020%205.79086%2020%208C20%2010.2091%2021.7909%2012%2024%2012Z%22%2F%3E%3Cpath%20fill%3D%22%232F88FF%22%20d%3D%22M24%2028C26.2091%2028%2028%2026.2091%2028%2024C28%2021.7909%2026.2091%2020%2024%2020C21.7909%2020%2020%2021.7909%2020%2024C20%2026.2091%2021.7909%2028%2024%2028Z%22%2F%3E%3Cpath%20fill%3D%22%232F88FF%22%20d%3D%22M38%2020C40.2091%2020%2042%2018.2091%2042%2016C42%2013.7909%2040.2091%2012%2038%2012C35.7909%2012%2034%2013.7909%2034%2016C34%2018.2091%2035.7909%2020%2038%2020Z%22%2F%3E%3Cpath%20fill%3D%22%232F88FF%22%20d%3D%22M38%2036C40.2091%2036%2042%2034.2091%2042%2032C42%2029.7909%2040.2091%2028%2038%2028C35.7909%2028%2034%2029.7909%2034%2032C34%2034.2091%2035.7909%2036%2038%2036Z%22%2F%3E%3Cpath%20fill%3D%22%232F88FF%22%20d%3D%22M10%2020C12.2091%2020%2014%2018.2091%2014%2016C14%2013.7909%2012.2091%2012%2010%2012C7.79086%2012%206%2013.7909%206%2016C6%2018.2091%207.79086%2020%2010%2020Z%22%2F%3E%3Cpath%20fill%3D%22%232F88FF%22%20d%3D%22M10%2036C12.2091%2036%2014%2034.2091%2014%2032C14%2029.7909%2012.2091%2028%2010%2028C7.79086%2028%206%2029.7909%206%2032C6%2034.2091%207.79086%2036%2010%2036Z%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%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%3E%3Cpath%20d%3D%22M37.8564%2020V24V28%22%2F%3E%3Cpath%20d%3D%22M27.4639%2038L30.928%2036L34.3921%2034%22%2F%3E%3Cpath%20d%3D%22M20.5356%2038L17.0715%2036L13.6074%2034%22%2F%3E%3Cpath%20d%3D%22M10.1436%2020V24V28%22%2F%3E%3Cpath%20d%3D%22M13.6074%2014L17.0715%2012L20.5356%2010%22%2F%3E%3Cpath%20d%3D%22M27.4639%2010L30.928%2012L34.3921%2014%22%2F%3E%3Cpath%20fill%3D%22%232F88FF%22%20d%3D%22M24%2044C26.2091%2044%2028%2042.2091%2028%2040C28%2037.7909%2026.2091%2036%2024%2036C21.7909%2036%2020%2037.7909%2020%2040C20%2042.2091%2021.7909%2044%2024%2044Z%22%2F%3E%3Cpath%20fill%3D%22%232F88FF%22%20d%3D%22M24%2012C26.2091%2012%2028%2010.2091%2028%208C28%205.79086%2026.2091%204%2024%204C21.7909%204%2020%205.79086%2020%208C20%2010.2091%2021.7909%2012%2024%2012Z%22%2F%3E%3Cpath%20fill%3D%22%232F88FF%22%20d%3D%22M24%2028C26.2091%2028%2028%2026.2091%2028%2024C28%2021.7909%2026.2091%2020%2024%2020C21.7909%2020%2020%2021.7909%2020%2024C20%2026.2091%2021.7909%2028%2024%2028Z%22%2F%3E%3Cpath%20fill%3D%22%232F88FF%22%20d%3D%22M38%2020C40.2091%2020%2042%2018.2091%2042%2016C42%2013.7909%2040.2091%2012%2038%2012C35.7909%2012%2034%2013.7909%2034%2016C34%2018.2091%2035.7909%2020%2038%2020Z%22%2F%3E%3Cpath%20fill%3D%22%232F88FF%22%20d%3D%22M38%2036C40.2091%2036%2042%2034.2091%2042%2032C42%2029.7909%2040.2091%2028%2038%2028C35.7909%2028%2034%2029.7909%2034%2032C34%2034.2091%2035.7909%2036%2038%2036Z%22%2F%3E%3Cpath%20fill%3D%22%232F88FF%22%20d%3D%22M10%2020C12.2091%2020%2014%2018.2091%2014%2016C14%2013.7909%2012.2091%2012%2010%2012C7.79086%2012%206%2013.7909%206%2016C6%2018.2091%207.79086%2020%2010%2020Z%22%2F%3E%3Cpath%20fill%3D%22%232F88FF%22%20d%3D%22M10%2036C12.2091%2036%2014%2034.2091%2014%2032C14%2029.7909%2012.2091%2028%2010%2028C7.79086%2028%206%2029.7909%206%2032C6%2034.2091%207.79086%2036%2010%2036Z%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/six-circular-connection.svg?color=%231a73e8&size=48
