spark logo
spark-color from LobeHub AI Icons by LobeHub · Color · MIT Free for personal and commercial use.
- Name
- spark-color
- Set
- LobeHub AI Icons
- Style
- Color
- Viewbox
- 24×24
- License
- MIT
2 other variants in LobeHub AI Icons
The same logo in other sets
Use the spark logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="#3dc8f9" d="M2 13.08C2 9.182 4.772 6.367 9.32 2.122c-.65 7.883 6.41 8.272 5.023 12.214-.99 2.815-4.244 1.949-4.59 1.342 0 0 1.212.347 1.385-.866.174-1.213-2.252-1.862-3.81-4.937-2.6 2.988-.954 9.008 4.2 9.008 4.764 0 6.583-4.937 4.894-8.099 0 0 4.071.693 4.418 3.811.346 3.119-3.638 8.533-9.095 8.403C6.288 22.868 2 18.84 2 13.08z"/><path fill="#ea0100" d="M17.852 6.107L11.615 0c-.52 5.933.866 8.374 4.894 9.485 2.729.753 3.307 1.04 4.504 2.772-.338-2.407-.78-3.812-3.161-6.15z"/><path fill="#1652d8" fill-rule="evenodd" d="M9.033 18.323c.709.354 1.542.56 2.495.56 4.764 0 6.583-4.937 4.894-8.099 0 0 4.071.693 4.418 3.811.156 1.403-.565 3.27-1.902 4.89-3.458 1.57-7.29.84-9.905-1.162z" clip-rule="evenodd"/></svg>
React
import type { SVGProps } from "react";
export function LobehubSparkColor(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="#3dc8f9" d="M2 13.08C2 9.182 4.772 6.367 9.32 2.122c-.65 7.883 6.41 8.272 5.023 12.214-.99 2.815-4.244 1.949-4.59 1.342 0 0 1.212.347 1.385-.866.174-1.213-2.252-1.862-3.81-4.937-2.6 2.988-.954 9.008 4.2 9.008 4.764 0 6.583-4.937 4.894-8.099 0 0 4.071.693 4.418 3.811.346 3.119-3.638 8.533-9.095 8.403C6.288 22.868 2 18.84 2 13.08z"/><path fill="#ea0100" d="M17.852 6.107L11.615 0c-.52 5.933.866 8.374 4.894 9.485 2.729.753 3.307 1.04 4.504 2.772-.338-2.407-.78-3.812-3.161-6.15z"/><path fill="#1652d8" fillRule="evenodd" d="M9.033 18.323c.709.354 1.542.56 2.495.56 4.764 0 6.583-4.937 4.894-8.099 0 0 4.071.693 4.418 3.811.156 1.403-.565 3.27-1.902 4.89-3.458 1.57-7.29.84-9.905-1.162z" clipRule="evenodd"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="#3dc8f9" d="M2 13.08C2 9.182 4.772 6.367 9.32 2.122c-.65 7.883 6.41 8.272 5.023 12.214-.99 2.815-4.244 1.949-4.59 1.342 0 0 1.212.347 1.385-.866.174-1.213-2.252-1.862-3.81-4.937-2.6 2.988-.954 9.008 4.2 9.008 4.764 0 6.583-4.937 4.894-8.099 0 0 4.071.693 4.418 3.811.346 3.119-3.638 8.533-9.095 8.403C6.288 22.868 2 18.84 2 13.08z"/><path fill="#ea0100" d="M17.852 6.107L11.615 0c-.52 5.933.866 8.374 4.894 9.485 2.729.753 3.307 1.04 4.504 2.772-.338-2.407-.78-3.812-3.161-6.15z"/><path fill="#1652d8" fill-rule="evenodd" d="M9.033 18.323c.709.354 1.542.56 2.495.56 4.764 0 6.583-4.937 4.894-8.099 0 0 4.071.693 4.418 3.811.156 1.403-.565 3.27-1.902 4.89-3.458 1.57-7.29.84-9.905-1.162z" clip-rule="evenodd"/></svg> </template>
CSS
.icon-spark-color {
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%2024%2024%22%3E%3Cpath%20fill%3D%22%233dc8f9%22%20d%3D%22M2%2013.08C2%209.182%204.772%206.367%209.32%202.122c-.65%207.883%206.41%208.272%205.023%2012.214-.99%202.815-4.244%201.949-4.59%201.342%200%200%201.212.347%201.385-.866.174-1.213-2.252-1.862-3.81-4.937-2.6%202.988-.954%209.008%204.2%209.008%204.764%200%206.583-4.937%204.894-8.099%200%200%204.071.693%204.418%203.811.346%203.119-3.638%208.533-9.095%208.403C6.288%2022.868%202%2018.84%202%2013.08z%22%2F%3E%3Cpath%20fill%3D%22%23ea0100%22%20d%3D%22M17.852%206.107L11.615%200c-.52%205.933.866%208.374%204.894%209.485%202.729.753%203.307%201.04%204.504%202.772-.338-2.407-.78-3.812-3.161-6.15z%22%2F%3E%3Cpath%20fill%3D%22%231652d8%22%20fill-rule%3D%22evenodd%22%20d%3D%22M9.033%2018.323c.709.354%201.542.56%202.495.56%204.764%200%206.583-4.937%204.894-8.099%200%200%204.071.693%204.418%203.811.156%201.403-.565%203.27-1.902%204.89-3.458%201.57-7.29.84-9.905-1.162z%22%20clip-rule%3D%22evenodd%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%2024%2024%22%3E%3Cpath%20fill%3D%22%233dc8f9%22%20d%3D%22M2%2013.08C2%209.182%204.772%206.367%209.32%202.122c-.65%207.883%206.41%208.272%205.023%2012.214-.99%202.815-4.244%201.949-4.59%201.342%200%200%201.212.347%201.385-.866.174-1.213-2.252-1.862-3.81-4.937-2.6%202.988-.954%209.008%204.2%209.008%204.764%200%206.583-4.937%204.894-8.099%200%200%204.071.693%204.418%203.811.346%203.119-3.638%208.533-9.095%208.403C6.288%2022.868%202%2018.84%202%2013.08z%22%2F%3E%3Cpath%20fill%3D%22%23ea0100%22%20d%3D%22M17.852%206.107L11.615%200c-.52%205.933.866%208.374%204.894%209.485%202.729.753%203.307%201.04%204.504%202.772-.338-2.407-.78-3.812-3.161-6.15z%22%2F%3E%3Cpath%20fill%3D%22%231652d8%22%20fill-rule%3D%22evenodd%22%20d%3D%22M9.033%2018.323c.709.354%201.542.56%202.495.56%204.764%200%206.583-4.937%204.894-8.099%200%200%204.071.693%204.418%203.811.156%201.403-.565%203.27-1.902%204.89-3.458%201.57-7.29.84-9.905-1.162z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/lobehub/spark-color.svg?color=%231a73e8&size=48
