ElevenLabs Logo

1interface LogoProps {
2  className?: string;
3  variant?: "icon" | "wordmark";
4  mode?: "dark" | "light";
5}
6 
7const COLORS = {
8  dark: "#FFFFFF",
9  light: "#000000",
10};
11 
12export function ElevenlabsLogo({
13  className,
14  variant = "icon",
15  mode = "dark",
16}: LogoProps) {
17  const color = COLORS[mode];
18 
19  if (variant === "wordmark") {
20    return (
21      <svg
22        role="img"
23        viewBox="0 0 694 90"
24        fill="none"
25        xmlns="http://www.w3.org/2000/svg"
26        className={className}
27      >
28        <title>ElevenLabs</title>
29        <path
30          d="M248.261 22.1901H230.466L251.968 88.5124H271.123L292.625 22.1901H274.83L261.365 72.1488L248.261 22.1901Z"
31          fill={color}
32        />
33        <path d="M0 0H18.413V88.5124H0V0Z" fill={color} />
34        <path d="M36.5788 0H54.9917V88.5124H36.5788V0Z" fill={color} />
35        <path
36          d="M73.1551 0H127.652V14.7521H91.568V35.8264H125.181V50.5785H91.568V73.7603H127.652V88.5124H73.1551V0Z"
37          fill={color}
38        />
39        <path d="M138.896 0H156.32V88.5124H138.896V0Z" fill={color} />
40        <path
41          d="M166.824 55.2893C166.824 31.1157 178.811 20.7025 197.471 20.7025C216.131 20.7025 226.759 30.9917 226.759 55.5372V59.5041H184.001C184.619 73.8843 188.944 78.719 197.224 78.719C203.773 78.719 207.851 74.876 208.593 68.1818H226.017C224.905 82.8099 212.795 90 197.224 90C177.452 90 166.824 79.4628 166.824 55.2893ZM209.582 47.9752C208.717 35.8264 204.515 31.8595 197.224 31.8595C189.933 31.8595 185.36 35.9504 184.125 47.9752H209.582Z"
42          fill={color}
43        />
44        <path
45          d="M295.962 55.2893C295.962 31.1157 307.949 20.7025 326.609 20.7025C345.269 20.7025 355.897 30.9917 355.897 55.5372V59.5041H313.139C313.757 73.8843 318.082 78.719 326.362 78.719C332.911 78.719 336.989 74.876 337.731 68.1818H355.155C354.043 82.8099 341.932 90 326.362 90C306.589 90 295.962 79.4628 295.962 55.2893ZM338.719 47.9752C337.854 35.8264 333.653 31.8595 326.362 31.8595C319.071 31.8595 314.498 35.9504 313.263 47.9752H338.719Z"
46          fill={color}
47        />
48        <path
49          d="M438.443 0H456.856V73.7603H491.457V88.5124H438.443V0Z"
50          fill={color}
51        />
52        <path
53          fillRule="evenodd"
54          clipRule="evenodd"
55// … truncated