kling logo
kling-color from LobeHub AI Icons by LobeHub · Color · MIT Free for personal and commercial use.
- Name
- kling-color
- Set
- LobeHub AI Icons
- Style
- Color
- Viewbox
- 24×24
- License
- MIT
2 other variants in LobeHub AI Icons
Use the kling logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="url(#svgID16)" d="M5.412 13.775A23.193 23.193 0 017.41 9.32c3.17-5.492 7.795-8.757 10.33-7.294C12.038-1.266 4.598.944 1.122 6.964A13.378 13.378 0 00.085 9.22c-.259.739.092 1.534.77 1.926l4.557 2.63z"/><path fill="url(#svgID17)" d="M18.588 10.164a23.188 23.188 0 01-1.999 4.455c-3.17 5.492-7.795 8.758-10.33 7.294 5.703 3.293 13.143 1.082 16.619-4.938a13.392 13.392 0 001.037-2.255c.259-.738-.092-1.534-.77-1.925l-4.557-2.63z"/><path fill="url(#svgID18)" d="M16.59 14.62c3.17-5.492 3.686-11.13 1.15-12.594C15.207.563 10.582 3.83 7.41 9.32c2.074-3.59 5.809-5.315 8.344-3.852 2.534 1.464 2.908 5.56.835 9.151z"/><path fill="url(#svgID19)" d="M7.41 9.32c-3.17 5.492-3.686 11.13-1.15 12.593 2.534 1.464 7.159-1.802 10.33-7.294-2.074 3.591-5.809 5.316-8.344 3.852-2.534-1.463-2.908-5.56-.835-9.15z"/><defs><radialGradient id="svgID16" cx="0" cy="0" r="1" gradientTransform="rotate(-59.132 14.606 2.26)scale(14.5747 19.9728)" gradientUnits="userSpaceOnUse"><stop offset=".095" stop-color="#fff959"/><stop offset=".326" stop-color="#0df35e"/><stop offset=".64" stop-color="#0bf2f9"/><stop offset="1" stop-color="#04a6f0"/></radialGradient><radialGradient id="svgID17" cx="0" cy="0" r="1" gradientTransform="rotate(120.868 6.491 10.491)scale(14.5747 19.9728)" gradientUnits="userSpaceOnUse"><stop offset=".095" stop-color="#fff959"/><stop offset=".326" stop-color="#0df35e"/><stop offset=".64" stop-color="#0bf2f9"/><stop offset="1" stop-color="#04a6f0"/></radialGradient><linearGradient id="svgID18" x1="15.578" x2="18.062" y1="1.798" y2="9.861" gradientUnits="userSpaceOnUse"><stop stop-color="#003eff"/><stop offset="1" stop-color="#0bffe7"/></linearGradient><linearGradient id="svgID19" x1="8.422" x2="5.938" y1="22.142" y2="14.079" gradientUnits="userSpaceOnUse"><stop stop-color="#003eff"/><stop offset="1" stop-color="#0bffe7"/></linearGradient></defs></svg>
React
import type { SVGProps } from "react";
export function LobehubKlingColor(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="url(#svgID16)" d="M5.412 13.775A23.193 23.193 0 017.41 9.32c3.17-5.492 7.795-8.757 10.33-7.294C12.038-1.266 4.598.944 1.122 6.964A13.378 13.378 0 00.085 9.22c-.259.739.092 1.534.77 1.926l4.557 2.63z"/><path fill="url(#svgID17)" d="M18.588 10.164a23.188 23.188 0 01-1.999 4.455c-3.17 5.492-7.795 8.758-10.33 7.294 5.703 3.293 13.143 1.082 16.619-4.938a13.392 13.392 0 001.037-2.255c.259-.738-.092-1.534-.77-1.925l-4.557-2.63z"/><path fill="url(#svgID18)" d="M16.59 14.62c3.17-5.492 3.686-11.13 1.15-12.594C15.207.563 10.582 3.83 7.41 9.32c2.074-3.59 5.809-5.315 8.344-3.852 2.534 1.464 2.908 5.56.835 9.151z"/><path fill="url(#svgID19)" d="M7.41 9.32c-3.17 5.492-3.686 11.13-1.15 12.593 2.534 1.464 7.159-1.802 10.33-7.294-2.074 3.591-5.809 5.316-8.344 3.852-2.534-1.463-2.908-5.56-.835-9.15z"/><defs><radialGradient id="svgID16" cx="0" cy="0" r="1" gradientTransform="rotate(-59.132 14.606 2.26)scale(14.5747 19.9728)" gradientUnits="userSpaceOnUse"><stop offset=".095" stopColor="#fff959"/><stop offset=".326" stopColor="#0df35e"/><stop offset=".64" stopColor="#0bf2f9"/><stop offset="1" stopColor="#04a6f0"/></radialGradient><radialGradient id="svgID17" cx="0" cy="0" r="1" gradientTransform="rotate(120.868 6.491 10.491)scale(14.5747 19.9728)" gradientUnits="userSpaceOnUse"><stop offset=".095" stopColor="#fff959"/><stop offset=".326" stopColor="#0df35e"/><stop offset=".64" stopColor="#0bf2f9"/><stop offset="1" stopColor="#04a6f0"/></radialGradient><linearGradient id="svgID18" x1="15.578" x2="18.062" y1="1.798" y2="9.861" gradientUnits="userSpaceOnUse"><stop stopColor="#003eff"/><stop offset="1" stopColor="#0bffe7"/></linearGradient><linearGradient id="svgID19" x1="8.422" x2="5.938" y1="22.142" y2="14.079" gradientUnits="userSpaceOnUse"><stop stopColor="#003eff"/><stop offset="1" stopColor="#0bffe7"/></linearGradient></defs></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="url(#svgID16)" d="M5.412 13.775A23.193 23.193 0 017.41 9.32c3.17-5.492 7.795-8.757 10.33-7.294C12.038-1.266 4.598.944 1.122 6.964A13.378 13.378 0 00.085 9.22c-.259.739.092 1.534.77 1.926l4.557 2.63z"/><path fill="url(#svgID17)" d="M18.588 10.164a23.188 23.188 0 01-1.999 4.455c-3.17 5.492-7.795 8.758-10.33 7.294 5.703 3.293 13.143 1.082 16.619-4.938a13.392 13.392 0 001.037-2.255c.259-.738-.092-1.534-.77-1.925l-4.557-2.63z"/><path fill="url(#svgID18)" d="M16.59 14.62c3.17-5.492 3.686-11.13 1.15-12.594C15.207.563 10.582 3.83 7.41 9.32c2.074-3.59 5.809-5.315 8.344-3.852 2.534 1.464 2.908 5.56.835 9.151z"/><path fill="url(#svgID19)" d="M7.41 9.32c-3.17 5.492-3.686 11.13-1.15 12.593 2.534 1.464 7.159-1.802 10.33-7.294-2.074 3.591-5.809 5.316-8.344 3.852-2.534-1.463-2.908-5.56-.835-9.15z"/><defs><radialGradient id="svgID16" cx="0" cy="0" r="1" gradientTransform="rotate(-59.132 14.606 2.26)scale(14.5747 19.9728)" gradientUnits="userSpaceOnUse"><stop offset=".095" stop-color="#fff959"/><stop offset=".326" stop-color="#0df35e"/><stop offset=".64" stop-color="#0bf2f9"/><stop offset="1" stop-color="#04a6f0"/></radialGradient><radialGradient id="svgID17" cx="0" cy="0" r="1" gradientTransform="rotate(120.868 6.491 10.491)scale(14.5747 19.9728)" gradientUnits="userSpaceOnUse"><stop offset=".095" stop-color="#fff959"/><stop offset=".326" stop-color="#0df35e"/><stop offset=".64" stop-color="#0bf2f9"/><stop offset="1" stop-color="#04a6f0"/></radialGradient><linearGradient id="svgID18" x1="15.578" x2="18.062" y1="1.798" y2="9.861" gradientUnits="userSpaceOnUse"><stop stop-color="#003eff"/><stop offset="1" stop-color="#0bffe7"/></linearGradient><linearGradient id="svgID19" x1="8.422" x2="5.938" y1="22.142" y2="14.079" gradientUnits="userSpaceOnUse"><stop stop-color="#003eff"/><stop offset="1" stop-color="#0bffe7"/></linearGradient></defs></svg> </template>
CSS
.icon-kling-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%22url(%23svgID16)%22%20d%3D%22M5.412%2013.775A23.193%2023.193%200%20017.41%209.32c3.17-5.492%207.795-8.757%2010.33-7.294C12.038-1.266%204.598.944%201.122%206.964A13.378%2013.378%200%2000.085%209.22c-.259.739.092%201.534.77%201.926l4.557%202.63z%22%2F%3E%3Cpath%20fill%3D%22url(%23svgID17)%22%20d%3D%22M18.588%2010.164a23.188%2023.188%200%2001-1.999%204.455c-3.17%205.492-7.795%208.758-10.33%207.294%205.703%203.293%2013.143%201.082%2016.619-4.938a13.392%2013.392%200%20001.037-2.255c.259-.738-.092-1.534-.77-1.925l-4.557-2.63z%22%2F%3E%3Cpath%20fill%3D%22url(%23svgID18)%22%20d%3D%22M16.59%2014.62c3.17-5.492%203.686-11.13%201.15-12.594C15.207.563%2010.582%203.83%207.41%209.32c2.074-3.59%205.809-5.315%208.344-3.852%202.534%201.464%202.908%205.56.835%209.151z%22%2F%3E%3Cpath%20fill%3D%22url(%23svgID19)%22%20d%3D%22M7.41%209.32c-3.17%205.492-3.686%2011.13-1.15%2012.593%202.534%201.464%207.159-1.802%2010.33-7.294-2.074%203.591-5.809%205.316-8.344%203.852-2.534-1.463-2.908-5.56-.835-9.15z%22%2F%3E%3Cdefs%3E%3CradialGradient%20id%3D%22svgID16%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(-59.132%2014.606%202.26)scale(14.5747%2019.9728)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.095%22%20stop-color%3D%22%23fff959%22%2F%3E%3Cstop%20offset%3D%22.326%22%20stop-color%3D%22%230df35e%22%2F%3E%3Cstop%20offset%3D%22.64%22%20stop-color%3D%22%230bf2f9%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2304a6f0%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22svgID17%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(120.868%206.491%2010.491)scale(14.5747%2019.9728)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.095%22%20stop-color%3D%22%23fff959%22%2F%3E%3Cstop%20offset%3D%22.326%22%20stop-color%3D%22%230df35e%22%2F%3E%3Cstop%20offset%3D%22.64%22%20stop-color%3D%22%230bf2f9%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2304a6f0%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22svgID18%22%20x1%3D%2215.578%22%20x2%3D%2218.062%22%20y1%3D%221.798%22%20y2%3D%229.861%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23003eff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230bffe7%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22svgID19%22%20x1%3D%228.422%22%20x2%3D%225.938%22%20y1%3D%2222.142%22%20y2%3D%2214.079%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23003eff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230bffe7%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%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%22url(%23svgID16)%22%20d%3D%22M5.412%2013.775A23.193%2023.193%200%20017.41%209.32c3.17-5.492%207.795-8.757%2010.33-7.294C12.038-1.266%204.598.944%201.122%206.964A13.378%2013.378%200%2000.085%209.22c-.259.739.092%201.534.77%201.926l4.557%202.63z%22%2F%3E%3Cpath%20fill%3D%22url(%23svgID17)%22%20d%3D%22M18.588%2010.164a23.188%2023.188%200%2001-1.999%204.455c-3.17%205.492-7.795%208.758-10.33%207.294%205.703%203.293%2013.143%201.082%2016.619-4.938a13.392%2013.392%200%20001.037-2.255c.259-.738-.092-1.534-.77-1.925l-4.557-2.63z%22%2F%3E%3Cpath%20fill%3D%22url(%23svgID18)%22%20d%3D%22M16.59%2014.62c3.17-5.492%203.686-11.13%201.15-12.594C15.207.563%2010.582%203.83%207.41%209.32c2.074-3.59%205.809-5.315%208.344-3.852%202.534%201.464%202.908%205.56.835%209.151z%22%2F%3E%3Cpath%20fill%3D%22url(%23svgID19)%22%20d%3D%22M7.41%209.32c-3.17%205.492-3.686%2011.13-1.15%2012.593%202.534%201.464%207.159-1.802%2010.33-7.294-2.074%203.591-5.809%205.316-8.344%203.852-2.534-1.463-2.908-5.56-.835-9.15z%22%2F%3E%3Cdefs%3E%3CradialGradient%20id%3D%22svgID16%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(-59.132%2014.606%202.26)scale(14.5747%2019.9728)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.095%22%20stop-color%3D%22%23fff959%22%2F%3E%3Cstop%20offset%3D%22.326%22%20stop-color%3D%22%230df35e%22%2F%3E%3Cstop%20offset%3D%22.64%22%20stop-color%3D%22%230bf2f9%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2304a6f0%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22svgID17%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(120.868%206.491%2010.491)scale(14.5747%2019.9728)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.095%22%20stop-color%3D%22%23fff959%22%2F%3E%3Cstop%20offset%3D%22.326%22%20stop-color%3D%22%230df35e%22%2F%3E%3Cstop%20offset%3D%22.64%22%20stop-color%3D%22%230bf2f9%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2304a6f0%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22svgID18%22%20x1%3D%2215.578%22%20x2%3D%2218.062%22%20y1%3D%221.798%22%20y2%3D%229.861%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23003eff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230bffe7%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22svgID19%22%20x1%3D%228.422%22%20x2%3D%225.938%22%20y1%3D%2222.142%22%20y2%3D%2214.079%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23003eff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230bffe7%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/lobehub/kling-color.svg?color=%231a73e8&size=48
