@marimo-team/frontend 0.20.2 → 0.20.3-dev77

package/src/components/icons/marimo-icons.tsx

@@ -0,0 +1,173 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type React from "react";
+import { useId } from "react";
+
+const MarimoLetterPaths = ({ stroke }: { stroke: string }) => {
+  return (
+    <g
+      // Center the original SVG: 1. Move to origin, 2. Scale to fit, 3. Shift to center of viewBox.
+      transform="translate(12 12) scale(0.115) translate(-433 -679)"
+      // The 'stroke' prop controls the color of the 'm' letter.
+      fill={stroke}
+      stroke="none"
+    >
+      {/* extracted from 'docs/_static/marimo-logotype-thick.svg' */}
+      <path d="m 388.08594,708.44141 h 23.32422 v -33.30079 c 0,-4.83203 2.625,-7.03906 6.30078,-7.03906 3.88672,0 6.19922,2.20703 6.19922,7.03906 v 33.30079 h 23.32031 v -33.30079 c 0,-4.83203 2.51953,-7.03906 6.30469,-7.03906 3.99218,0 6.30078,2.20703 6.30078,7.03906 v 33.30079 h 23.42578 V 670.625 c 0,-17.33594 -9.13672,-23.11328 -20.48438,-23.11328 -9.875,0 -15.96875,5.67578 -17.4375,10.92578 H 444.5 c -3.57422,-8.19141 -8.82422,-10.92578 -16.59766,-10.92578 -8.30078,0 -14.18359,4.9375 -15.65234,9.98047 h -0.83984 v -8.40235 h -23.32422 z" />
+    </g>
+  );
+};
+
+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 && <circle fill={fill} stroke="none" cx="12" cy="12" r="10.3" />}
+      <g
+        // Center the original SVG: 1. Move to origin, 2. Scale to fit, 3. Shift to center of viewBox.
+        transform="translate(12 12) scale(0.094) translate(-600 -485)"
+        // The 'stroke' prop controls the fill and stroke color of the circular logo.
+        fill={stroke}
+        stroke={stroke}
+        // Adjusted by 1.5x for visual balance with other unscaled strokes.
+        strokeWidth={Number(strokeWidth) * 1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        {/* extracted from 'docs/_static/marimo-logotype-thick.svg' */}
+        <path d="m 517.37109,413.55859 c 1.51172,-1.78125 3.1875,-4.15625 2.10547,-6.26172 6.04688,-3.5625 11.39063,-8.26171 15.76172,-13.76562 -2.375,1.89062 -4.96484,3.40234 -7.71875,4.58984 20.67578,-20.40625 51.76953,-29.6914 80.32422,-23.96875 -22.99609,-0.86328 -46.42188,5.23438 -65.42578,18.19141 -19.05469,12.90234 -33.51953,32.71094 -39.07813,55.05859 8.41797,-24.45312 26.17969,-45.55859 48.85157,-57.97265 -1.78125,1.83593 -3.56641,3.72265 -5.39844,5.55859 8.63672,-3.5625 16.46094,-8.90625 25.04687,-12.63281 25.20703,-11.01172 55.54297,-6.85547 79.02344,7.5039 23.48047,14.35938 40.37891,37.89454 50.20313,63.58985 4.3164,11.22656 7.33984,23.69531 3.50781,35.08594 -0.86328,-14.84375 -5.72266,-29.14844 -12.03906,-42.58985 -10.47266,-22.40234 -25.47657,-43.39844 -46.58204,-56.24609 -21.10546,-12.79297 -49.01562,-16.19531 -70.60546,-4.15625 11.0664,-1.1875 22.23828,-1.83594 33.19531,-0.26953 20.62109,2.91406 39.67578,13.71093 54.14062,28.66015 14.41407,15.00782 24.40235,33.95313 30.28516,53.8711 5.72266,19.48828 7.60937,40.97265 0.26953,59.97265 21.42969,-34.65625 17.86719,-82.91015 -8.3125,-114.05859 -10.95703,-13.00781 -25.15625,-22.99609 -40.48437,-30.22656 -17.70704,-8.3125 -37.14063,-13.11719 -56.67969,-12.57813 -19.53906,0.53906 -39.08203,6.64063 -54.67969,18.40625 12.95313,-11.44531 29.84766,-17.92187 47.01563,-19.70312 17.21875,-1.72657 34.65234,1.08203 51.01171,6.58593 34.00391,11.55079 64.98829,37.03125 74.97657,71.52344 2.53515,8.85156 3.66797,18.02735 4.69531,27.20703 0.86328,7.9336 1.56641,15.86719 1.40234,23.85547 -0.7539,39.46094 -25.96484,78.00391 -62.72265,92.41406 -10.41797,4.05079 -21.42969,6.26172 -32.4961,7.82813 -17.70703,2.48047 -36.05859,3.23828 -53.11718,-2.05078 -8.79688,-2.75391 -17.00391,-7.01953 -24.61329,-12.25391 -31.52343,-21.59375 -51.4414,-59.21484 -51.4414,-97.43359 0,-6.80078 0.59375,-13.54688 1.51172,-20.24219 0.80859,-6.15234 1.88672,-12.25391 3.66797,-18.19141 2.69921,-8.74609 6.91015,-17.0039 12.47265,-24.28906 0.96875,-0.59375 1.94141,-1.24219 2.85938,-1.89062 -12.79297,27.04297 -20.40625,59 -8.69141,86.58203 -4.21094,-17.97266 -4.48047,-36.8125 -0.75391,-54.84375 1.1875,-0.42969 2.375,-0.91406 3.50782,-1.40235 0.0547,-1.1875 0.10547,-2.32031 0.16015,-3.50781 -0.86328,0.97266 -1.67187,1.94141 -2.53515,2.85938 1.99609,-14.30469 8.14843,-27.85157 17.3789,-38.8086 m 8.69141,-0.70312 c 3.34766,-2.26563 6.69531,-4.53516 10.04297,-6.80078 -2.10547,4.26562 -5.99219,7.60937 -10.52735,9.12109 -21.05078,21.75391 -27.53125,54.19531 -25.04687,84.31641 0.97266,11.39062 3.29297,23.21093 10.63281,31.95703 -5.125,-21.05469 -5.39844,-43.29297 -0.69922,-64.45313 0.91797,-0.0547 1.23828,1.13282 1.23828,2.05078 0.37891,14.19922 -2.05078,28.39454 -1.02343,42.58985 1.02343,14.14453 6.3164,29.09765 18.1914,36.8164 9.28516,6.04297 18.51563,12.08985 27.7461,18.13672 -21.59375,-6.91015 -40.4336,-21.91797 -52.08985,-41.34765 3.12891,8.47265 7.5,16.51562 12.89844,23.75 -0.69922,-1.94532 -1.34766,-3.94141 -2.05078,-5.9375 5.45312,5.1289 10.95703,10.14843 16.41016,15.22265 3.99609,3.72266 10.25781,7.5 14.35937,3.9375 0.64844,1.35157 -0.53906,3.02344 -1.99609,3.40235 -1.46094,0.43359 -3.02344,0 -4.48047,-0.4336 6.53125,4.69922 13.33203,9.01563 20.34765,12.95703 -1.02343,0.16016 -1.34765,1.67188 -0.69921,2.53516 0.64453,0.86719 1.72656,1.08203 2.75,1.35156 25.75,5.5586 53.17187,3.50782 77.78515,-5.99218 -21.16015,4.96484 -43.72265,6.10156 -64.23437,-1.07813 -17.32813,-6.04687 -32.4961,-17.97656 -42.42969,-33.35937 -3.18359,-4.96875 -5.82813,-10.20313 -8.25781,-15.54688 -7.82813,-17.59766 -12.79297,-36.8125 -11.39063,-56.03125 1.40625,-19.21484 9.82422,-38.37891 24.94141,-50.25391 1.5625,-1.24218 3.50781,-2.42968 5.44922,-1.94531 -14.89844,10.79688 -23.75,28.66406 -26.07032,46.91016 -2.32031,18.29687 1.45704,36.86719 8.09766,54.03125 4.75,12.14844 11.0625,23.91406 19.75391,33.6289 3.72656,4.15625 7.9375,7.9375 12.73828,10.79688 8.80078,5.28906 19.21875,7.28906 29.42187,8.58203 13.8711,1.78125 27.85157,2.53906 41.83203,2.21484 -17.65234,4.15625 -36.11328,1.1875 -53.98046,-1.78125 30.33984,11.39063 65.91015,4.42579 91.98437,-14.73828 5.17969,-3.83203 10.09375,-8.09375 14.03125,-13.22265 6.04688,-7.88282 9.66406,-17.48828 11.5,-27.26172 4.75,-25.47656 -2.05078,-52.08985 -14.41406,-74.92188 -8.58203,-15.87109 -19.97266,-30.55078 -34.97656,-40.53906 -14.03516,-9.28516 -30.71485,-14.19531 -47.50391,-15.11328 -25.80078,-1.51172 -53.11328,7.01562 -70.28125,26.44922 M 576.75,588.17969 c 11.60547,2.91406 23.32031,5.01953 35.19531,6.42578 -14.57422,3.34375 -29.58203,-1.78125 -43.66797,-6.80078 -8.3164,-2.91797 -16.73437,-5.94141 -24.45312,-10.25782 -18.67969,-10.36328 -32.71485,-28.125 -40.86328,-47.8789 -1.40235,-3.50781 -2.69922,-7.01953 -3.77735,-10.58203 -0.10937,-0.42969 -0.43359,0.59375 0,0.3789 0.42969,-0.16015 0.375,-0.80859 0.16016,-1.24218 -4.85938,-11.71094 -7.82813,-24.28907 -8.74609,-36.92188 -0.91797,19.10938 3.83203,38.32422 12.46875,55.4375 9.39453,18.62109 23.48437,34.98047 41.1875,46.04297 17.65234,11.06641 38.91796,16.67969 59.64843,14.68359 29.14844,-2.85937 54.73438,-19.86328 78.21485,-37.30078 -10.36328,13.71094 -26.07032,22.1875 -41.34766,30.17578 26.39453,-7.39453 47.55469,-28.28515 60.29688,-52.57422 -6.31641,10.79297 -16.19532,19.26954 -26.9375,25.63672 -10.79688,6.3711 -22.61719,10.79688 -34.4375,15.0625 -5.1836,1.89063 -10.41797,3.72266 -15.76172,5.23438 -15.27735,4.375 -31.36328,5.88672 -47.17969,4.48047 m 107.95703,-36.48828 c 2.69922,-2.53907 5.34766,-5.12891 7.50391,-8.04297 3.40234,-4.69532 5.66797,-10.14844 7.82812,-15.54688 2.91406,-7.33984 5.88281,-14.73828 6.64063,-22.61719 -1.40625,1.24219 -1.89063,3.07813 -2.42969,4.85938 -7.17969,24.88281 -24.9375,46.58203 -47.98828,58.45703 10.85156,-2.42969 20.1875,-9.5 28.44531,-17.10937 m -131.92187,26.44921 c 1.13281,0.26954 2.53515,0.75391 2.58984,1.89063 0.42969,-0.75781 1.72656,-0.75781 2.21094,0 0.21875,-0.0547 0.0547,-0.43359 -0.21485,-0.54297 -1.61718,-0.86328 -3.23828,-1.72656 -4.80468,-2.58984 -6.53125,-3.50782 -12.52344,-7.87891 -17.86719,-12.95313 -0.64844,1.40235 -0.16016,3.1836 1.08203,4.04688 2.375,1.72656 4.75,3.45312 7.125,5.18359 2.85937,2.375 6.26172,4.10156 9.87891,4.96484 m 155.89062,-81.61718 c -0.21484,3.99609 -0.43359,8.04297 -0.70312,12.03906 -0.0508,0.53906 -0.0508,1.07812 -0.0508,1.61719 -0.0547,0.97265 -0.10937,1.94531 -0.21875,2.86328 -0.0547,1.1875 -0.10546,2.26562 -0.10546,3.45312 2.26562,-9.17578 3.07421,-18.78515 2.375,-28.17578 -0.26954,-0.10937 -0.54297,-0.26953 -0.75782,-0.43359 -0.16015,2.85937 -0.3789,5.72265 -0.53906,8.63672 m -209.8164,-59.16016 c -0.3789,0.69922 -0.70312,1.40234 -1.02734,2.10547 0.37891,0.48437 1.07813,-0.10938 1.24219,-0.70313 0.16015,-0.53906 0.32422,-1.29687 0.91797,-1.34765 -0.26953,-0.27344 -0.53907,-0.54297 -0.8086,-0.8125 -0.10937,0.21875 -0.21875,0.53906 -0.10937,0.75781 m 39.02734,-44.80469 c 0.53906,-0.42968 1.07813,-0.86328 1.61719,-1.34765 -0.91797,-0.37891 -2.10547,0.10547 -2.48047,1.07812 0.26953,0.10938 0.53906,0.21485 0.86328,0.26953 m 1.67188,-2.53515 c 1.1875,0.26953 2.53906,-0.0547 3.50781,-0.86328 -1.23828,-0.0547 -2.48047,0.21484 -3.50781,0.86328 m -42.96485,54.78906 c -0.0547,-0.26953 -0.10937,-0.53906 -0.10937,-0.75781 -1.02735,0.3789 -1.51172,1.78125 -0.91797,2.69922 0.21484,-0.69922 0.53906,-1.34766 1.02734,-1.94141 m -6.10156,27.52734 c -0.26953,0.37891 -0.0547,1.02735 0.43359,1.08203 0.26954,-0.86328 0.21485,-1.78125 -0.0547,-2.69921 -0.53907,0.26953 -0.70313,1.02343 -0.37891,1.51171" />
+        <path d="m 527.08984,398.39062 c 0.10547,0.16016 0.21485,0.375 0.32422,0.53907 -0.48828,0.69922 -1.40625,1.02343 -2.21484,0.80859 0.43359,-0.59375 1.08203,-1.02344 1.78125,-1.1875" />
+        <path d="m 522.82422,401.84375 c 0.75781,-0.26953 1.5664,-0.43359 2.375,-0.37891 -0.16016,1.1875 -2.16016,1.51172 -2.64453,0.37891" />
+        <path d="m 520.125,399.35937 c 0.48828,-0.7539 1.40234,-1.29296 2.375,-1.1875 0.21484,0.54297 0.0547,1.1875 -0.37891,1.56641 -0.7539,0.10938 -1.67187,0.21484 -2.21093,-0.37891" />
+        <path d="m 671.42969,402.92187 c 0.32422,-0.0508 0.64843,0.26954 0.59375,0.59375 -0.0547,0.32422 -0.42969,0.54297 -0.75391,0.4336 -0.48828,-0.53906 -0.97266,-1.13281 -1.45703,-1.72656 0.53906,-0.4336 1.50781,-0.0547 1.61719,0.59375" />
+        <path d="m 524.98437,394.93359 c 0.37891,-0.42968 1.13282,-0.42968 1.56641,-0.0547 -0.70312,0.70312 -1.62109,1.1875 -2.59375,1.51171 -0.10547,-0.59375 0.43359,-1.29296 1.02734,-1.24218" />
+        <path d="m 516.13281,445.13672 c 0.48438,-0.70313 1.78125,-0.4336 1.94141,0.42969 -0.64844,-0.10547 -1.34766,0.10937 -1.78125,0.59375 -0.26953,0.10937 -0.70313,-0.10547 -0.70313,-0.42969 -0.0508,-0.26953 0.27344,-0.59375 0.59375,-0.54297" />
+        <path d="m 547.00781,410.58984 c 0.26953,-0.10937 0.64844,-0.21875 0.91797,-0.10937 0.32422,0.10937 0.48438,0.59375 0.26953,0.80859 -1.02734,0.64844 -2.21484,1.02735 -3.40234,1.08203 0.54297,-0.75781 1.35156,-1.35156 2.21484,-1.78125" />
+        <path d="m 562.92969,579.27344 c 0.54297,0.3789 1.13672,0.75781 1.67578,1.13281 -1.1875,0.48828 -2.58985,0.21875 -3.5625,-0.64453 -0.21485,-0.37891 0.21484,-0.91797 0.59375,-0.91797 0.48437,-0.0547 0.91797,0.21484 1.29297,0.42969" />
+        <path d="m 538.26172,405.62109 c -0.26953,-0.80859 -0.0547,-1.78125 0.59375,-2.375 0.43359,-0.10547 0.86328,-0.42968 1.02734,-0.91797 0.69922,0.26954 1.34766,0.54297 2.05078,0.8125 -1.1875,0.8086 -2.42968,1.61719 -3.67187,2.48047" />
+        <path d="m 511.92187,463.59766 c 0,-0.32422 0,-0.64844 0,-0.97266 0.53907,-0.26953 1.13282,-0.26953 1.61719,-0.0547 -0.96875,1.02735 -1.51172,2.42969 -1.40234,3.83203 -0.59375,-0.42968 -1.24219,-0.91797 -1.89063,-1.34765 0.54297,-0.4336 1.13672,-0.91797 1.73047,-1.40625" />
+        <path d="m 508.35937,415.93359 c 0.21485,-1.67578 1.1875,-3.1875 2.53516,-4.21093 0.37891,-0.26954 0.97266,-0.4336 1.1875,-0.0547 -1.1875,1.1875 -2.16016,2.53515 -2.85937,4.04687 -0.16407,0.27344 -0.59375,0.4336 -0.86329,0.21875" />
+        <path d="m 513.91797,449.39844 c 1.07812,-0.8086 2.10547,-1.61719 3.18359,-2.42969 -0.26953,1.02734 -0.53906,1.94531 -0.80859,2.96875 -0.37891,0.21875 -0.64844,0.59766 -1.02344,0.8125 -0.37891,0.21484 -0.91797,0.26953 -1.1875,-0.10938 -0.21875,-0.3789 0.375,-0.91796 0.59375,-0.53906 -0.21875,-0.21484 -0.48828,-0.43359 -0.75781,-0.70312" />
+        <path d="m 555.05078,407.56641 c -0.10937,0.26953 -0.21484,0.53906 -0.10937,0.86328 -0.86329,0.16015 -1.67188,0.32422 -2.42969,0.48437 -0.10547,0.32422 -0.21485,0.64844 -0.32031,0.97266 -0.64844,-0.0547 -1.29688,-0.0547 -1.89063,-0.0547 -0.53906,-0.26953 0,-1.02344 0.53906,-1.29297 1.07813,-0.54297 2.21485,-0.86719 3.40235,-1.02734 -0.16407,-0.26953 -0.32422,-0.48438 -0.48828,-0.75391 0.86328,-0.70312 1.89062,-1.1875 3.02343,-1.51172 0.21485,0.375 0.26953,0.8086 0.16407,1.23828 -0.37891,0.16407 -0.75782,0.21875 -1.13672,0.10938 0.0547,0.26953 0.10937,0.53906 0.16406,0.86328 -0.37891,0.10938 -0.64844,0.16406 -0.91797,0.10938" />
+        <path d="m 512.83984,412.64062 c 0.42969,-0.26953 1.02344,-0.3789 1.51172,-0.26953 -0.21875,-0.26953 -0.3789,-0.54297 -0.54297,-0.8125 0.54297,-0.10547 1.08203,-0.21484 1.67578,-0.26953 0.21485,-0.53906 0.21485,-1.1875 0,-1.72656 0.59375,-0.0547 1.24219,0.0547 1.78125,0.26953 0.16016,0.21484 0.21485,0.53906 0.16016,0.80859 -0.26953,0.10938 -0.59375,0.21875 -0.91797,0.32422 -0.10547,0.54297 -0.26953,1.08203 -0.375,1.6211 -0.26953,0.16015 -0.70312,0.21484 -1.02734,0.10937 -0.48438,2.91406 -3.67188,4.58594 -4.80469,7.28516 -0.37891,0.91797 -0.75391,2.10547 -1.72656,2.10547 -0.26953,-0.32422 -0.21485,-0.91797 0.16015,-1.1875 -0.375,-0.10938 -0.69921,-0.21485 -1.02343,-0.32422 -0.0547,-0.59375 0.91797,-0.42969 1.40234,-0.0547 0.43359,-0.375 0.0547,-1.24219 -0.48437,-1.24219 0.59375,-0.48437 0.97265,-1.23828 1.07812,-1.99609 0.59375,0.0547 1.1875,-0.16016 1.56641,-0.59375 -0.4336,0.10937 -0.91797,-0.21484 -1.02735,-0.69922 0.86328,0.16016 1.73047,-0.64844 1.67578,-1.51172 0.64844,-0.3789 1.29297,-0.75781 1.94141,-1.13672 -0.26953,-0.16015 -0.64844,-0.42968 -1.02344,-0.69922" />
+        <path d="m 682.38672,415.5 c -1.1875,-1.61719 -2.42969,-3.18359 -3.9375,-4.53516 -2.10547,-1.88672 -4.80469,-3.5625 -5.23828,-6.36718 12.6875,10.74218 22.45703,24.9375 27.90625,40.64453 0.48828,0.43359 -0.0508,1.40625 -0.64453,1.24218 -4.75,-10.95703 -10.85157,-21.42968 -18.08594,-30.98437" />
+        <path d="m 539.88281,406.97266 c 2.21094,-1.78125 4.75,-3.45704 5.66797,-6.15625 0.26953,-0.75391 1.02344,-1.34766 1.72656,-1.78125 10.90235,-6.85547 23.64453,-10.63282 36.48828,-10.84766 -6.42187,1.72656 -12.79296,3.39844 -19.21484,5.12891 -9.98437,2.64453 -17.32812,10.90234 -24.07422,18.78515 -5.83203,6.85547 -11.71484,13.71094 -17.54297,20.61719 -0.70312,1.89062 -1.35156,3.83203 -2.05078,5.72266 -0.26953,0.86328 -0.59375,1.72656 -1.35156,2.26562 -0.69922,0.54297 -1.88672,0.54297 -2.32031,-0.26953 2.58984,-4.53125 5.18359,-9.12109 7.82812,-13.71094 4.21094,-7.125 8.41797,-14.46484 14.84375,-19.7539" />
+      </g>
+    </>
+  );
+};
+
+export const MarimoIcon = ({
+  size = 24,
+  width,
+  height,
+  fill,
+  stroke,
+  strokeWidth = 2,
+  viewBox = "0 0 24 24",
+  ...props
+}: React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+}) => {
+  return (
+    <svg
+      width={width ?? size}
+      height={height ?? size}
+      viewBox={viewBox}
+      {...props}
+    >
+      <title>marimo icon</title>
+      <MarimoCirclePaths
+        fill={fill}
+        stroke={stroke ?? "currentColor"}
+        strokeWidth={strokeWidth}
+      />
+      <MarimoLetterPaths stroke={stroke ?? "currentColor"} />
+    </svg>
+  );
+};
+
+const MarimoMultiIcon = ({
+  size = 24,
+  width,
+  height,
+  fill,
+  stroke,
+  strokeWidth = 2,
+  maskCenterX,
+  maskCenterY,
+  maskRadius,
+  children,
+  viewBox = "0 0 24 24",
+  ...props
+}: React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+  maskCenterX: number | string;
+  maskCenterY: number | string;
+  maskRadius: number | string;
+}) => {
+  const maskId = useId();
+  return (
+    <svg
+      width={width ?? size}
+      height={height ?? size}
+      viewBox={viewBox}
+      {...props}
+    >
+      <title>marimo multi icon</title>
+      <defs>
+        <mask id={maskId}>
+          <rect width="100%" height="100%" fill="white" />
+          <circle
+            cx={maskCenterX}
+            cy={maskCenterY}
+            r={maskRadius}
+            fill="black"
+            stroke="none"
+          />
+        </mask>
+      </defs>
+      <g mask={`url(#${maskId})`}>
+        <MarimoCirclePaths
+          fill={fill}
+          stroke={stroke ?? "currentColor"}
+          strokeWidth={strokeWidth}
+        />
+      </g>
+      {children}
+      <MarimoLetterPaths stroke={stroke ?? "currentColor"} />
+    </svg>
+  );
+};
+
+export const MarimoPlusIcon = ({
+  stroke,
+  strokeWidth = 2,
+  ...props
+}: React.SVGProps<SVGSVGElement> & { size?: number | string }) => {
+  return (
+    <MarimoMultiIcon
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      maskCenterX={19} // center x of plus symbol
+      maskCenterY={19} // center y of plus symbol
+      maskRadius={Number(strokeWidth) + 3} // size of plus symbol
+      {...props}
+    >
+      {/* plus symbol at lower right corner */}
+      <path
+        stroke={stroke ?? "currentColor"}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        d="M16 19h6M19 16v6"
+      />
+    </MarimoMultiIcon>
+  );
+};

package/src/components/markdown/markdown-renderer.tsx

@@ -25,22 +25,6 @@ interface CodeBlockProps {
   language: string | undefined;
 }
 
-const SUPPORTED_LANGUAGES = new Set([
-  "python",
-  "markdown",
-  "sql",
-  "json",
-  "yaml",
-  "toml",
-  "shell",
-  "javascript",
-  "typescript",
-  "jsx",
-  "tsx",
-  "css",
-  "html",
-]);
-
 function maybeTransform(
   language: string | undefined,
   code: string,
@@ -128,10 +112,9 @@ const CodeBlock = ({ code, language }: CodeBlockProps) => {
       <Suspense>
         <LazyAnyLanguageCodeMirror
           theme={theme === "dark" ? "dark" : "light"}
-          // Only show the language if it's supported
-          language={
-            language && SUPPORTED_LANGUAGES.has(language) ? language : undefined
-          }
+          language={language}
+          // Since this may be LLM generated, we don't want show errors for unsupported languages
+          hideUnsupportedLanguageErrors={true}
           className="cm border rounded overflow-hidden"
           extensions={extensions}
           value={value}

package/src/components/pages/run-page.tsx

@@ -1,12 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { Panel, PanelGroup } from "react-resizable-panels";
+import { MarimoIcon } from "@/components/icons/marimo-icons";
 import type { AppConfig } from "@/core/config/config-schema";
 import { Constants } from "@/core/constants";
 import { RunApp } from "@/core/run-app";
 import { isStaticNotebook } from "@/core/static/static-state";
 import { isWasm } from "@/core/wasm/utils";
-import marimoIcon from "../../assets/icon-32x32.png";
 import { ContextAwarePanel } from "../editor/chrome/panels/context-aware-panel/context-aware-panel";
 import { PanelsWrapper } from "../editor/chrome/wrapper/panels";
 import { StaticBanner } from "../static-html/static-banner";
@@ -41,7 +41,7 @@ const Watermark = () => {
         className="text-sm text-(--grass-11) font-bold tracking-wide transition-colors bg-(--grass-4) hover:bg-(--grass-5) border-t border-l border-(--grass-8) px-3 py-1 rounded-tl-md flex items-center gap-2"
       >
         <span>made with marimo</span>
-        <img src={marimoIcon} alt="marimo" className="h-4 w-auto" />
+        <MarimoIcon className="h-4 w-auto" />
       </a>
     </div>
   );

package/src/components/storage/components.tsx

@@ -0,0 +1,86 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import AwsIcon from "@marimo-team/llm-info/icons/aws.svg?inline";
+import AwsDarkIcon from "@marimo-team/llm-info/icons/aws-dark.svg?inline";
+import AzureIcon from "@marimo-team/llm-info/icons/azure.svg?inline";
+import CloudflareIcon from "@marimo-team/llm-info/icons/cloudflare.svg?inline";
+import CoreweaveIcon from "@marimo-team/llm-info/icons/coreweave.svg?inline";
+import CoreweaveDarkIcon from "@marimo-team/llm-info/icons/coreweave-dark.svg?inline";
+import {
+  DatabaseZapIcon,
+  FileCodeIcon,
+  FileIcon,
+  FileSpreadsheetIcon,
+  FileTextIcon,
+  FileVideoIcon,
+  GlobeIcon,
+  HardDriveIcon,
+  ImageIcon,
+} from "lucide-react";
+import GoogleCloudIcon from "@/components/databases/icons/google-cloud-storage.svg?inline";
+import type { KnownStorageProtocol } from "@/core/storage/types";
+import { useTheme } from "@/theme/useTheme";
+
+export function renderFileIcon(name: string): React.ReactNode {
+  const ext = name.split(".").pop()?.toLowerCase();
+  switch (ext) {
+    case "png":
+    case "jpg":
+    case "jpeg":
+    case "gif":
+    case "svg":
+    case "webp":
+      return <ImageIcon className="h-3.5 w-3.5 text-purple-500" />;
+    case "csv":
+    case "parquet":
+    case "arrow":
+    case "xlsx":
+      return <FileSpreadsheetIcon className="h-3.5 w-3.5 text-green-500" />;
+    case "py":
+    case "js":
+    case "ts":
+    case "json":
+      return <FileCodeIcon className="h-3.5 w-3.5 text-blue-500" />;
+    case "mp4":
+    case "mpeg":
+      return <FileVideoIcon className="h-3.5 w-3.5 text-orange-500" />;
+    case "txt":
+    case "md":
+    case "log":
+      return <FileTextIcon className="h-3.5 w-3.5 text-muted-foreground" />;
+    default:
+      return <FileIcon className="h-3.5 w-3.5 text-muted-foreground" />;
+  }
+}
+
+type IconEntry =
+  | { src: string; dark?: string }
+  | React.ComponentType<{ className?: string }>;
+
+const PROTOCOL_ICONS: Record<KnownStorageProtocol, IconEntry> = {
+  s3: { src: AwsIcon, dark: AwsDarkIcon },
+  coreweave: { src: CoreweaveIcon, dark: CoreweaveDarkIcon },
+  cloudflare: { src: CloudflareIcon },
+  azure: { src: AzureIcon },
+  gcs: { src: GoogleCloudIcon },
+  http: GlobeIcon,
+  file: HardDriveIcon,
+  "in-memory": DatabaseZapIcon,
+};
+
+export const ProtocolIcon: React.FC<{
+  protocol: KnownStorageProtocol | (string & {});
+}> = ({ protocol }) => {
+  const { theme } = useTheme();
+  const entry =
+    PROTOCOL_ICONS[protocol.toLowerCase() as KnownStorageProtocol] ??
+    HardDriveIcon;
+
+  if ("src" in entry) {
+    const src = theme === "dark" && entry.dark ? entry.dark : entry.src;
+    return <img src={src} alt={protocol} className="h-3.5 w-3.5" />;
+  }
+
+  const Icon = entry;
+  return <Icon className="h-3.5 w-3.5" />;
+};

package/src/components/storage/storage-file-viewer.tsx

@@ -0,0 +1,225 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { FileIcon, LoaderCircle, RefreshCwIcon } from "lucide-react";
+import type React from "react";
+import { useCallback } from "react";
+import { useLocale } from "react-aria";
+import { FilePreviewHeader } from "@/components/editor/file-tree/file-header";
+import {
+  FileContentRenderer,
+  isMediaMime,
+} from "@/components/editor/file-tree/renderers";
+import { toast } from "@/components/ui/use-toast";
+import { DownloadStorage } from "@/core/storage/request-registry";
+import type { StorageEntry } from "@/core/storage/types";
+import { useAsyncData } from "@/hooks/useAsyncData";
+import { downloadByURL } from "@/utils/download";
+import { formatBytes } from "@/utils/formatting";
+import { Logger } from "@/utils/Logger";
+import { CopyClipboardIcon } from "../icons/copy-icon";
+import { Button } from "../ui/button";
+import { renderFileIcon } from "./components";
+
+const MAX_MEDIA_PREVIEW_SIZE = 100 * 1024 * 1024; // 100 MB
+
+interface Props {
+  entry: StorageEntry;
+  namespace: string;
+  onBack: () => void;
+}
+
+function displayName(path: string): string {
+  const trimmed = path.endsWith("/") ? path.slice(0, -1) : path;
+  const parts = trimmed.split("/");
+  return parts[parts.length - 1] || trimmed;
+}
+
+type PreviewData =
+  | { type: "media"; url: string }
+  | { type: "text"; content: string };
+
+export const StorageFileViewer: React.FC<Props> = ({
+  entry,
+  namespace,
+  onBack,
+}) => {
+  const { locale } = useLocale();
+  const name = displayName(entry.path);
+  const mime = entry.mimeType || "text/plain";
+  const isMedia = isMediaMime(mime);
+  const tooLargeForMedia =
+    isMedia && entry.size > MAX_MEDIA_PREVIEW_SIZE && entry.size > 0;
+
+  const {
+    data: preview,
+    isPending,
+    error,
+    refetch,
+  } = useAsyncData(async (): Promise<PreviewData | null> => {
+    if (tooLargeForMedia) {
+      return null;
+    }
+
+    const result = await DownloadStorage.request({
+      namespace,
+      path: entry.path,
+      preview: !isMedia,
+    });
+    if (result.error) {
+      throw new Error(result.error);
+    }
+    if (!result.url) {
+      throw new Error("No URL returned");
+    }
+
+    if (isMedia) {
+      return { type: "media", url: result.url };
+    }
+
+    const resp = await fetch(result.url);
+    if (!resp.ok) {
+      throw new Error(`Failed to fetch preview: ${resp.statusText}`);
+    }
+    const content = await resp.text();
+    return { type: "text", content };
+  }, [namespace, entry.path, isMedia, tooLargeForMedia]);
+
+  const handleDownload = useCallback(async () => {
+    try {
+      const result = await DownloadStorage.request({
+        namespace,
+        path: entry.path,
+      });
+      if (result.error) {
+        toast({
+          title: "Download failed",
+          description: result.error,
+          variant: "danger",
+        });
+        return;
+      }
+      if (result.url) {
+        downloadByURL(result.url, result.filename ?? name);
+      }
+    } catch (error_) {
+      Logger.error("Failed to download storage entry", error_);
+      toast({
+        title: "Download failed",
+        description: String(error_),
+        variant: "danger",
+      });
+    }
+  }, [namespace, entry.path, name]);
+
+  const header = (
+    <FilePreviewHeader
+      filename={name}
+      filenameIcon={renderFileIcon(name)}
+      onBack={onBack}
+      onDownload={handleDownload}
+    />
+  );
+
+  const renderMetadata = ({
+    includeMime = false,
+  }: {
+    includeMime?: boolean;
+  }) => {
+    return (
+      <div className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5 p-4 text-xs">
+        <span className="text-muted-foreground font-medium">Path</span>
+        <div className="truncate flex items-center gap-1.5">
+          <span className="font-mono text-[11px]">{entry.path}</span>
+          <CopyClipboardIcon value={entry.path} className="h-3 w-3" />
+        </div>
+
+        {includeMime && (
+          <span className="text-muted-foreground font-medium">Type</span>
+        )}
+        {includeMime && <span>{mime}</span>}
+        {entry.size > 0 && (
+          <>
+            <span className="text-muted-foreground font-medium">Size</span>
+            <span>{formatBytes(entry.size, locale)}</span>
+          </>
+        )}
+        {entry.lastModified != null && (
+          <>
+            <span className="text-muted-foreground font-medium">Modified</span>
+            <span>{new Date(entry.lastModified * 1000).toLocaleString()}</span>
+          </>
+        )}
+      </div>
+    );
+  };
+
+  if (tooLargeForMedia) {
+    return (
+      <div className="flex flex-col h-full">
+        {header}
+        {renderMetadata({ includeMime: true })}
+        <div className="px-4 pb-4 text-xs text-muted-foreground italic">
+          File is too large to preview ({formatBytes(entry.size, locale)}).
+        </div>
+      </div>
+    );
+  }
+
+  if (isPending) {
+    return (
+      <div className="flex flex-col h-full">
+        {header}
+        {renderMetadata({})}
+        <div className="flex-1 flex items-center justify-center gap-2 text-xs text-muted-foreground min-h-24">
+          <LoaderCircle className="h-4 w-4 animate-spin" />
+          Loading preview...
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex flex-col h-full">
+        {header}
+        {renderMetadata({ includeMime: true })}
+        <div className="px-4 pb-4 text-xs text-destructive">
+          Failed to load preview: {error.message}
+        </div>
+        <div className="px-4 pb-4">
+          <Button variant="secondary" size="xs" onClick={refetch}>
+            <RefreshCwIcon className="h-3 w-3 mr-1" />
+            Retry
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (preview) {
+    return (
+      <div className="flex flex-col h-full">
+        {header}
+        {renderMetadata({})}
+        <FileContentRenderer
+          mimeType={mime}
+          contents={preview.type === "text" ? preview.content : undefined}
+          mediaSource={
+            preview.type === "media" ? { url: preview.url } : undefined
+          }
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {header}
+      {renderMetadata({ includeMime: true })}
+      <div className="p-4 flex items-center gap-2 text-xs text-muted-foreground">
+        <FileIcon className="h-4 w-4" />
+        Preview not available for this file type.
+      </div>
+    </div>
+  );
+};