registry/default/blocks/logos/figma-logo/components/logos/figma.tsx
interface LogoProps {
className?: string;
variant?: "icon" | "icon-mono" | "wordmark" | "logo";
mode?: "dark" | "light";
}
const COLORS = {
dark: "#FFFFFF",
light: "#000000",
};
export function FigmaLogo({
className,
variant = "icon",
mode = "dark",
}: LogoProps) {
const color = COLORS[mode];
if (variant === "icon-mono") {
return (
<svg
role="img"
viewBox="280 310 470 660"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<title>Figma</title>
<path
fillRule="evenodd"
clipRule="evenodd"
fill={color}
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"
/>
</svg>
);
}
if (variant === "wordmark") {
return (
<svg
role="img"
viewBox="180 180 660 280"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<title>Figma</title>
<path
fill={color}
d="M752.784 389.427C744.553 389.427 737.161 387.831 730.61 384.64C724.226 381.448 719.103 377.164 715.239 371.788C711.543 366.245 709.695 359.861 709.695 352.638C709.695 343.23 712.719 335.587 718.767 329.707C724.814 323.828 733.466 319.796 744.721 317.612L774.203 311.565C780.082 310.389 784.114 308.541 786.298 306.021C788.482 303.501 789.574 299.806 789.574 294.934L792.597 324.416L750.264 333.487C744.553 334.663 740.101 336.763 736.909 339.787C733.886 342.811 732.374 347.01 732.374 352.386C732.374 357.929 734.474 362.381 738.673 365.741C743.041 369.101 748.92 370.781 756.312 370.781C762.36 370.781 767.903 369.437 772.943 366.749C778.15 364.061 782.182 360.365 785.038 355.662C788.062 350.79 789.574 345.246 789.574 339.031V294.934C789.574 288.886 787.39 284.183 783.022 280.823C778.822 277.295 773.027 275.531 765.635 275.531C756.228 275.531 749.004 277.883 743.965 282.587C738.925 287.29 735.985 293.926 735.145 302.493L712.971 299.47C713.811 290.566 716.499 282.923 721.034 276.539C725.57 269.988 731.618 264.948 739.177 261.42C746.737 257.893 755.724 256.129 766.139 256.129C780.922 256.129 792.261 259.908 800.157 267.468C808.052 275.027 812 284.771 812 296.698V385.647H790.078V369.269C787.894 374.812 783.442 379.6 776.723 383.632C770.171 387.495 762.192 389.427 752.784 389.427Z"
/>
<path
fill={color}
d="M531.028 385.647V259.908H552.951V274.019C554.63 269.148 558.326 264.948 564.038 261.42C569.749 257.893 576.385 256.129 583.944 256.129C591.336 256.129 598.139 257.725 604.355 260.916C610.571 264.108 614.602 268.896 616.45 275.279C618.634 269.4 622.666 264.78 628.545 261.42C634.593 257.893 641.312 256.129 648.704 256.129C661.471 256.129 671.214 259.824 677.934 267.216C684.653 274.607 688.013 285.359 688.013 299.47V385.647H665.587V302.493C665.587 294.094 663.739 287.794 660.043 283.595C656.515 279.227 651.308 277.043 644.42 277.043C636.861 277.043 630.981 279.731 626.781 285.107C622.75 290.314 620.734 297.958 620.734 308.037V385.647H598.307V302.493C598.307 294.094 596.46 287.794 592.764 283.595C589.236 279.227 584.028 277.043 577.141 277.043C569.581 277.043 563.702 279.731 559.502 285.107C555.47 290.314 553.455 297.958 553.455 308.037V385.647H531.028Z"
/>
<path
fill={color}
d="M445.277 431.004C429.654 431.004 416.971 427.393 407.227 420.169C397.484 412.946 391.268 402.866 388.581 389.931L410.503 385.144C412.351 393.375 416.299 399.758 422.346 404.294C428.394 408.998 436.037 411.35 445.277 411.35C456.364 411.35 464.679 408.494 470.223 402.782C475.934 397.239 478.79 388.923 478.79 377.836V357.929C476.27 364.145 471.567 369.185 464.679 373.048C457.96 376.912 450.4 378.844 442.001 378.844C430.914 378.844 421.17 376.324 412.771 371.284C404.371 366.077 397.82 358.853 393.116 349.614C388.413 340.375 386.061 329.707 386.061 317.612C386.061 305.349 388.413 294.598 393.116 285.359C397.82 276.119 404.287 268.98 412.519 263.94C420.918 258.732 430.746 256.129 442.001 256.129C450.4 256.129 458.044 258.061 464.931 261.924C471.987 265.62 476.774 270.24 479.294 275.783V259.908H501.217V377.836C501.217 388.923 499.033 398.415 494.665 406.31C490.297 414.373 483.914 420.505 475.514 424.705C467.283 428.904 457.204 431.004 445.277 431.004ZM444.773 358.937C455.524 358.937 464.091 355.158 470.475 347.598C477.026 340.039 480.302 330.043 480.302 317.612C480.302 305.013 477.026 294.934 470.475 287.374C463.923 279.815 455.356 276.035 444.773 276.035C434.021 276.035 425.37 279.815 418.818 287.374C412.435 294.934 409.243 305.013 409.243 317.612C409.243 330.043 412.519 340.039 419.07 347.598C425.622 355.158 434.189 358.937 444.773 358.937Z"
/>
<path
fill={color}
d="M340.803 385.647V259.908H363.229V385.647H340.803ZM340.551 243.781V208H363.481V243.781H340.551Z"
/>
<path
fill={color}
d="M212 385.647V208H235.686V385.647H212ZM216.788 310.557V289.138H313.297V310.557H216.788ZM216.788 229.67V208H322.62V229.67H216.788Z"
/>
</svg>
);
}
if (variant === "logo") {
return (
<svg
role="img"
viewBox="180 225 680 195"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<title>Figma</title>
{/* Colorful Icon */}
<path
d="M192 271.84C192 249.285 210.285 231 232.84 231H329.88C352.436 231 370.721 249.285 370.721 271.84V368.88C370.721 391.436 352.436 409.721 329.88 409.721H232.84C210.285 409.721 192 391.436 192 368.88V271.84Z"
fill={color}
/>
<path
d="M239.473 362.248C239.473 350.681 248.85 341.304 260.417 341.304H281.36V362.248C281.36 373.815 271.984 383.192 260.417 383.192C248.85 383.192 239.473 373.815 239.473 362.248Z"
fill="#24CB71"
/>
<path
d="M281.36 257.529V299.416H302.304C313.871 299.416 323.248 290.04 323.248 278.473C323.248 266.906 313.871 257.529 302.304 257.529H281.36Z"
fill="#FF7237"
/>
<ellipse
cx="302.13"
cy="320.36"
rx="20.9438"
ry="20.9438"
fill="#00B6FF"
/>
<path
d="M239.473 278.473C239.473 290.04 248.85 299.417 260.417 299.417H281.36V257.529H260.417C248.85 257.529 239.473 266.906 239.473 278.473Z"
fill="#FF3737"
/>
<path
d="M239.473 320.36C239.473 331.927 248.85 341.304 260.417 341.304H281.36V299.417H260.417C248.85 299.417 239.473 308.793 239.473 320.36Z"
fill="#874FFF"
/>
{/* Wordmark */}
<path
fill={color}
d="M792.387 381.985C786.881 381.985 781.936 380.92 777.554 378.791C773.283 376.662 769.856 373.804 767.271 370.218C764.799 366.52 763.563 362.261 763.563 357.442C763.563 351.167 765.586 346.068 769.631 342.145C773.677 338.223 779.464 335.534 786.993 334.077L806.715 330.042C810.648 329.258 813.346 328.025 814.806 326.344C816.267 324.663 816.998 322.198 816.998 318.948L819.021 338.615L790.702 344.667C786.881 345.451 783.903 346.852 781.768 348.869C779.745 350.887 778.734 353.688 778.734 357.274C778.734 360.973 780.138 363.942 782.948 366.184C785.869 368.425 789.803 369.546 794.747 369.546C798.793 369.546 802.501 368.649 805.872 366.856C809.356 365.063 812.053 362.597 813.964 359.46C815.986 356.21 816.998 352.512 816.998 348.365V318.948C816.998 314.913 815.537 311.776 812.615 309.534C809.806 307.181 805.929 306.004 800.984 306.004C794.691 306.004 789.859 307.573 786.488 310.711C783.116 313.849 781.15 318.275 780.588 323.991L765.754 321.974C766.316 316.034 768.114 310.935 771.148 306.677C774.182 302.306 778.228 298.944 783.285 296.591C788.342 294.237 794.354 293.061 801.321 293.061C811.21 293.061 818.796 295.582 824.077 300.625C829.359 305.668 832 312.168 832 320.124V379.463H817.335V368.537C815.874 372.235 812.896 375.429 808.401 378.119C804.018 380.696 798.68 381.985 792.387 381.985Z"
/>
<path
fill={color}
d="M644.043 379.463V295.582H658.708V304.996C659.831 301.746 662.304 298.944 666.125 296.591C669.945 294.237 674.384 293.061 679.441 293.061C684.386 293.061 688.937 294.125 693.095 296.254C697.253 298.384 699.95 301.578 701.186 305.836C702.647 301.914 705.344 298.832 709.277 296.591C713.323 294.237 717.818 293.061 722.762 293.061C731.303 293.061 737.821 295.526 742.316 300.457C746.811 305.388 749.058 312.56 749.058 321.974V379.463H734.056V323.991C734.056 318.387 732.82 314.185 730.348 311.383C727.988 308.47 724.504 307.013 719.897 307.013C714.84 307.013 710.907 308.806 708.097 312.392C705.4 315.866 704.052 320.965 704.052 327.689V379.463H689.049V323.991C689.049 318.387 687.813 314.185 685.341 311.383C682.981 308.47 679.497 307.013 674.89 307.013C669.833 307.013 665.9 308.806 663.09 312.392C660.393 315.866 659.045 320.965 659.045 327.689V379.463H644.043Z"
/>
<path
fill={color}
d="M586.679 409.721C576.228 409.721 567.743 407.312 561.225 402.493C554.707 397.674 550.55 390.95 548.752 382.321L563.417 379.127C564.653 384.618 567.294 388.877 571.339 391.903C575.385 395.041 580.498 396.61 586.679 396.61C594.095 396.61 599.658 394.704 603.366 390.894C607.187 387.196 609.098 381.649 609.098 374.252V360.973C607.412 365.119 604.265 368.481 599.658 371.058C595.163 373.636 590.106 374.925 584.487 374.925C577.07 374.925 570.553 373.244 564.934 369.882C559.315 366.408 554.932 361.589 551.786 355.425C548.639 349.262 547.066 342.145 547.066 334.077C547.066 325.896 548.639 318.724 551.786 312.56C554.932 306.396 559.259 301.634 564.765 298.272C570.384 294.798 576.958 293.061 584.487 293.061C590.106 293.061 595.219 294.349 599.827 296.927C604.546 299.392 607.749 302.474 609.435 306.172V295.582H624.1V374.252C624.1 381.649 622.639 387.98 619.717 393.248C616.795 398.627 612.525 402.717 606.906 405.519C601.4 408.32 594.657 409.721 586.679 409.721ZM586.341 361.645C593.534 361.645 599.265 359.123 603.535 354.08C607.918 349.037 610.109 342.37 610.109 334.077C610.109 325.672 607.918 318.948 603.535 313.905C599.152 308.862 593.421 306.34 586.341 306.34C579.149 306.34 573.362 308.862 568.979 313.905C564.709 318.948 562.574 325.672 562.574 334.077C562.574 342.37 564.765 349.037 569.148 354.08C573.531 359.123 579.262 361.645 586.341 361.645Z"
/>
<path
fill={color}
d="M516.79 379.365V295.582H531.793V379.463L516.79 379.365ZM516.622 284.824V260.954H531.961V284.824H516.622Z"
/>
<path
fill={color}
d="M430.627 379.463V260.954H446.472V379.463H430.627ZM433.83 329.37V315.081H498.39V329.37H433.83ZM433.83 275.41V260.954H504.627V275.41H433.83Z"
/>
</svg>
);
}
// Default: icon (full-color)
return (
<svg
role="img"
viewBox="280 310 470 660"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<title>Figma</title>
<path
d="M312 840C312 784.772 356.772 740 412 740H512V840C512 895.228 467.228 940 412 940C356.772 940 312 895.228 312 840Z"
fill="#24CB71"
/>
<path
d="M512 340V540H612C667.228 540 712 495.228 712 440C712 384.772 667.228 340 612 340H512Z"
fill="#FF7237"
/>
<circle cx="611.167" cy="640" r="100" fill="#00B6FF" />
<path
d="M312 440C312 495.228 356.772 540 412 540H512V340H412C356.772 340 312 384.772 312 440Z"
fill="#FF3737"
/>
<path
d="M312 640C312 695.228 356.772 740 412 740H512V540H412C356.772 540 312 584.772 312 640Z"
fill="#874FFF"
/>
</svg>
);
}
Figma logo with 4 base variants (icon full-color, icon-mono, wordmark, logo) and dark/light modes = 7 total combinations. Icon variant is always full-color with official Figma colors.
