Figma Logo

1interface LogoProps {
2  className?: string;
3  variant?: "icon" | "icon-mono" | "wordmark" | "logo";
4  mode?: "dark" | "light";
5}
6 
7const COLORS = {
8  dark: "#FFFFFF",
9  light: "#000000",
10};
11 
12export function FigmaLogo({
13  className,
14  variant = "icon",
15  mode = "dark",
16}: LogoProps) {
17  const color = COLORS[mode];
18 
19  if (variant === "icon-mono") {
20    return (
21      <svg
22        role="img"
23        viewBox="280 310 470 660"
24        xmlns="http://www.w3.org/2000/svg"
25        className={className}
26      >
27        <title>Figma</title>
28        <path
29          fillRule="evenodd"
30          clipRule="evenodd"
31          fill={color}
32          d="M354.969 546.036C324.285 526.042 304 491.426 304 452.071C304 390.176 354.176 340 416.071 340H608.085C669.98 340 720.156 390.176 720.156 452.071C720.156 491.426 699.872 526.042 669.187 546.036C699.872 566.03 720.156 600.647 720.156 640.001C720.156 701.896 669.98 752.072 608.085 752.072H606.042C576.784 752.072 550.144 740.86 530.185 722.498V826.907C530.185 889.494 478.911 940 416.579 940C354.811 940 304 889.951 304 827.929C304 788.575 324.284 753.959 354.967 733.965C324.284 713.971 304 679.355 304 640.001C304 600.647 324.285 566.03 354.969 546.036ZM530.185 640.001C530.185 681.896 564.148 715.858 606.042 715.858H608.085C649.98 715.858 683.942 681.896 683.942 640.001C683.942 598.106 649.98 564.144 608.085 564.144H606.042C564.148 564.144 530.185 598.106 530.185 640.001ZM493.971 564.144H416.071C374.176 564.144 340.214 598.106 340.214 640.001C340.214 681.811 374.039 715.72 415.816 715.858L415.935 715.858L493.971 715.858V564.144ZM416.071 752.072C415.986 752.072 415.901 752.072 415.816 752.072C374.039 752.209 340.214 786.119 340.214 827.929C340.214 869.697 374.557 903.786 416.579 903.786C459.165 903.786 493.971 869.24 493.971 826.907V752.072H416.071ZM493.971 527.928H416.071C374.176 527.928 340.214 493.966 340.214 452.071C340.214 410.176 374.176 376.214 416.071 376.214H493.971V527.928ZM608.085 527.928H530.185V376.214H608.085C649.98 376.214 683.942 410.176 683.942 452.071C683.942 493.966 649.98 527.928 608.085 527.928Z"
33        />
34      </svg>
35    );
36  }
37 
38  if (variant === "wordmark") {
39    return (
40      <svg
41        role="img"
42        viewBox="180 180 660 280"
43        xmlns="http://www.w3.org/2000/svg"
44        className={className}
45      >
46        <title>Figma</title>
47        <path
48          fill={color}
49// … truncated