Lovable logo
The Lovable logo as clean SVG, in brand color and mono, with a dark-mode variant. Copy it, download it, or install it as a typed React component.
- Brand color
- #4b73ff
- Categories
- AI
- Variants
- 5 SVG files
- Website
- lovable.dev
- Source
- gilbarbara/logos · CC0
Use the Lovable logo
shadcn CLI
npx shadcn@latest add @logoforge/lovableFirst time? Add the @logoforge registry to components.json, or use the MCP server.
React
import { LovableLogo } from "@/components/logos/lovable";
<LovableLogo className="size-8" />
<LovableLogo variant="mono" /> {/* currentColor */}
<LovableLogo type="wordmark" className="h-6 w-auto" />icon.svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" viewBox="0 0 256 261"><title>Lovable</title><defs><radialGradient id="lovable-c" cx="7.166%" cy="52.108%" r="113.046%" fx="7.166%" fy="52.108%" gradientTransform="matrix(.1701 0 0 1 .06 0)"><stop offset="0%" stop-color="#4b73ff"/><stop offset="17%" stop-color="#4b73ff" stop-opacity=".998"/><stop offset="25%" stop-color="#4b73ff" stop-opacity=".991"/><stop offset="31%" stop-color="#4b73ff" stop-opacity=".972"/><stop offset="33.5%" stop-color="#4b73ff" stop-opacity=".957"/><stop offset="36.5%" stop-color="#4b73ff" stop-opacity=".932"/><stop offset="39%" stop-color="#4b73ff" stop-opacity=".904"/><stop offset="41.5%" stop-color="#4b73ff" stop-opacity=".866"/><stop offset="44%" stop-color="#4b73ff" stop-opacity=".821"/><stop offset="46.5%" stop-color="#4b73ff" stop-opacity=".767"/><stop offset="49%" stop-color="#4b73ff" stop-opacity=".705"/><stop offset="51.5%" stop-color="#4b73ff" stop-opacity=".635"/><stop offset="57.5%" stop-color="#4b73ff" stop-opacity=".453"/><stop offset="61.5%" stop-color="#4b73ff" stop-opacity=".336"/><stop offset="63.5%" stop-color="#4b73ff" stop-opacity=".282"/><stop offset="65%" stop-color="#4b73ff" stop-opacity=".244"/><stop offset="68%" stop-color="#4b73ff" stop-opacity=".179"/><stop offset="70%" stop-color="#4b73ff" stop-opacity=".141"/><stop offset="72.5%" stop-color="#4b73ff" stop-opacity=".103"/><stop offset="74.5%" stop-color="#4b73ff" stop-opacity=".077"/><stop offset="77.5%" stop-color="#4b73ff" stop-opacity=".049"/><stop offset="82.5%" stop-color="#4b73ff" stop-opacity=".021"/><stop offset="89%" stop-color="#4b73ff" stop-opacity=".005"/><stop offset="100%" stop-color="#4b73ff" stop-opacity="0"/></radialGradient><radialGradient id="lovable-d" cx="8.381%" cy="16.444%" r="131.291%" fx="8.381%" fy="16.444%" gradientTransform="matrix(.1701 0 0 1 .07 0)"><stop offset="0%" stop-color="#ff66f4"/><stop offset="27%" stop-color="#ff66f4" stop-opacity=".995"/><stop offset="33%" stop-color="#ff66f4" stop-opacity=".983"/><stop offset="38%" stop-color="#ff66f4" stop-opacity=".959"/><stop offset="42%" stop-color="#ff66f4" stop-opacity=".914"/><stop offset="44%" stop-color="#ff66f4" stop-opacity=".886"/><stop offset="47.5%" stop-color="#ff66f4" stop-opacity=".821"/><stop offset="50%" stop-color="#ff66f4" stop-opacity=".765"/><stop offset="52%" stop-color="#ff66f4" stop-opacity=".713"/><stop offset="55.5%" stop-color="#ff66f4" stop-opacity=".611"/><stop offset="62.5%" stop-color="#ff66f4" stop-opacity=".387"/><stop offset="65.5%" stop-color="#ff66f4" stop-opacity=".298"/><stop offset="67%" stop-color="#ff66f4" stop-opacity=".257"/><stop offset="69.5%" stop-color="#ff66f4" stop-opacity=".197"/><stop offset="73%" stop-color="#ff66f4" stop-opacity=".126"/><stop offset="74.5%" stop-color="#ff66f4" stop-opacity=".103"/><stop offset="78.5%" stop-color="#ff66f4" stop-opacity=".059"/><stop offset="81.5%" stop-color="#ff66f4" stop-opacity=".036"/><stop offset="84%" stop-color="#ff66f4" stop-opacity=".022"/><stop offset="90.5%" stop-color="#ff66f4" stop-opacity=".005"/><stop offset="100%" stop-color="#ff66f4" stop-opacity="0"/></radialGradient><radialGradient id="lovable-e" cx="10.691%" cy="4.219%" r="113.046%" fx="10.691%" fy="4.219%" gradientTransform="matrix(.1701 0 0 1 .089 0)"><stop offset="0%" stop-color="#ff0105"/><stop offset="14.5%" stop-color="#ff0105" stop-opacity=".998"/><stop offset="22.5%" stop-color="#ff0105" stop-opacity=".989"/><stop offset="29%" stop-color="#ff0105" stop-opacity=".967"/><stop offset="31.5%" stop-color="#ff0105" stop-opacity=".952"/><stop offset="34%" stop-color="#ff0105" stop-opacity=".93"/><stop offset="38.5%" stop-color="#ff0105" stop-opacity=".876"/><stop offset="42%" stop-color="#ff0105" stop-opacity=".817"/><stop offset="44%" stop-color="#ff0105" stop-opacity=".776"/><stop offset="46%" stop-color="#ff0105" stop-opacity=".73"/><stop offset="50%" stop-color="#ff0105" stop-opacity=".624"/><stop offset="59%" stop-color="#ff0105" stop-opacity=".36"/><stop offset="63%" stop-color="#ff0105" stop-opacity=".256"/><stop offset="67%" stop-color="#ff0105" stop-opacity=".171"/><stop offset="71%" stop-color="#ff0105" stop-opacity=".106"/><stop offset="74%" stop-color="#ff0105" stop-opacity=".071"/><stop offset="76.5%" stop-color="#ff0105" stop-opacity=".049"/><stop offset="82%" stop-color="#ff0105" stop-opacity=".02"/><stop offset="89%" stop-color="#ff0105" stop-opacity=".005"/><stop offset="100%" stop-color="#ff0105" stop-opacity="0"/></radialGradient><radialGradient id="lovable-f" cx="8.578%" cy="16.431%" r="87.141%" fx="8.578%" fy="16.431%" gradientTransform="matrix(.1701 0 0 1 .071 0)"><stop offset="0%" stop-color="#fe7b02" stop-opacity=".972"/><stop offset="7%" stop-color="#fe7b02" stop-opacity=".964"/><stop offset="13.5%" stop-color="#fe7b02" stop-opacity=".937"/><stop offset="16%" stop-color="#fe7b02" stop-opacity=".92"/><stop offset="20%" stop-color="#fe7b02" stop-opacity=".885"/><stop offset="25%" stop-color="#fe7b02" stop-opacity=".825"/><stop offset="29.5%" stop-color="#fe7b02" stop-opacity=".753"/><stop offset="35%" stop-color="#fe7b02" stop-opacity=".646"/><stop offset="39.5%" stop-color="#fe7b02" stop-opacity=".547"/><stop offset="45%" stop-color="#fe7b02" stop-opacity=".419"/><stop offset="52.5%" stop-color="#fe7b02" stop-opacity=".262"/><stop offset="55.5%" stop-color="#fe7b02" stop-opacity=".209"/><stop offset="59.5%" stop-color="#fe7b02" stop-opacity=".149"/><stop offset="64.5%" stop-color="#fe7b02" stop-opacity=".091"/><stop offset="70%" stop-color="#fe7b02" stop-opacity=".049"/><stop offset="77%" stop-color="#fe7b02" stop-opacity=".019"/><stop offset="85.5%" stop-color="#fe7b02" stop-opacity=".005"/><stop offset="100%" stop-color="#fe7b02" stop-opacity="0"/></radialGradient><path id="lovable-a" d="M76.812 0c42.423 0 76.813 34.48 76.813 77.015v29.27h25.563c42.423 0 76.812 34.481 76.812 77.015s-34.39 77.015-76.812 77.015H0v-183.3C0 34.48 34.39 0 76.812 0"/></defs><mask id="lovable-b" fill="#fff"><use xlink:href="#lovable-a"/></mask><g mask="url(#lovable-b)"><path fill="url(#lovable-c)" d="M0 0h1567.207v266.649H0z"/><path fill="url(#lovable-d)" d="M0 0h1567.207v266.649H0z"/><path fill="url(#lovable-e)" d="M0 0h1567.207v266.649H0z"/><path fill="url(#lovable-f)" d="M0 0h1567.207v266.649H0z"/></g></svg>Download
Related logos
Lovable and the Lovable logo are trademarks of their respective owner. Logoforge is not affiliated with or endorsed by Lovable; the logo is provided to refer to the product. Follow the brand's own guidelines. Own this brand and want it removed? Contact us — handled within 72 hours.