/* Copyright 2026 Marimo. All rights reserved. */
import type React from "react";
import { useId } from "react";
const MarimoLetterPaths = ({ stroke }: { stroke: string }) => {
return (
{/* extracted from 'docs/_static/marimo-logotype-thick.svg' */}
);
};
const MarimoCirclePaths = ({
fill,
stroke,
strokeWidth,
}: {
fill?: string;
stroke: string;
strokeWidth: number | string;
}) => {
return (
<>
{/* If provided, the 'fill' prop controls the inner fill color of the circular logo. */}
{fill && }
{/* extracted from 'docs/_static/marimo-logotype-thick.svg' */}
);
};
export const MarimoIcon = ({
size = 24,
width,
height,
fill,
stroke,
strokeWidth = 2,
viewBox = "0 0 24 24",
...props
}: React.SVGProps & {
size?: number | string;
}) => {
return (
);
};
const MarimoMultiIcon = ({
size = 24,
width,
height,
fill,
stroke,
strokeWidth = 2,
maskCenterX,
maskCenterY,
maskRadius,
children,
viewBox = "0 0 24 24",
...props
}: React.SVGProps & {
size?: number | string;
maskCenterX: number | string;
maskCenterY: number | string;
maskRadius: number | string;
}) => {
const maskId = useId();
return (
);
};
export const MarimoPlusIcon = ({
stroke,
strokeWidth = 2,
...props
}: React.SVGProps & { size?: number | string }) => {
return (
{/* plus symbol at lower right corner */}
);
};