diff --git a/website/README.md b/website/README.md
index 3cedd54248..d35f51a260 100644
--- a/website/README.md
+++ b/website/README.md
@@ -4,26 +4,30 @@ MCAP documentation is built using [Docusaurus](https://docusaurus.io/).
 
 ### Installation
 
-```
-$ corepack enable
-$ yarn install
+```sh
+corepack enable
+yarn install
 ```
 
 ### Local Development
 
-```
-$ yarn start
+```sh
+yarn start
 ```
 
 This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
 
 ### Production Build
 
-```
-$ yarn build
+```sh
+yarn build
 ```
 
-This command generates static content into the `build` directory and can be served using any static contents hosting service.
+This command generates static content into the `build` directory and can be served using:
+
+```sh
+yarn serve
+```
 
 ### Deployment
 
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index d5459f9b65..afd8b2ac37 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -9,6 +9,8 @@ const util = require("util");
 const webpack = require("webpack");
 const execAsync = util.promisify(require("child_process").exec);
 
+const modifySvgoConfigInPlace = require("./modifySvgoConfigInPlace");
+
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: "MCAP",
@@ -34,6 +36,7 @@ const config = {
     (_context, _options) => ({
       name: "MCAP website custom webpack config",
       configureWebpack(config, _isServer, _utils, _content) {
+        modifySvgoConfigInPlace(config);
         return {
           mergeStrategy: {
             "resolve.extensions": "replace",
diff --git a/website/modifySvgoConfigInPlace.js b/website/modifySvgoConfigInPlace.js
new file mode 100644
index 0000000000..70f7c1fb1a
--- /dev/null
+++ b/website/modifySvgoConfigInPlace.js
@@ -0,0 +1,53 @@
+/* eslint-env node */
+/* cspell:disable */
+// @ts-nocheck
+
+/**
+ * Modify the svgo configuration (in place) to prevent it from minifying IDs in SVGs.
+ * This is necessary because it doesn't account for the global ID namespace, and causes
+ * ID collisions between the SVGs loaded into the same page.
+ *
+ * Refs:
+ * - https://github.com/facebook/docusaurus/issues/8297
+ * - https://github.com/svg/svgo/issues/1714
+ * - https://linear.app/foxglove/issue/FG-7251/logos-are-cut-off-on-mcapdev
+ *
+ * @param {webpack.Configuration} config
+ */
+module.exports = function modifySvgoConfigInPlace(config) {
+  const NEW_SVGO_CONFIG = {
+    plugins: [
+      {
+        name: "preset-default",
+        params: {
+          overrides: {
+            removeTitle: false,
+            removeViewBox: false,
+            cleanupIDs: false, // do not change IDs
+          },
+        },
+      },
+    ],
+  };
+  // try to find the svgo config rule and replace it
+  let updated = false;
+  try {
+    for (const rule of config.module.rules) {
+      if (rule.test?.toString() === "/\\.svg$/i") {
+        for (const nestedRule of rule.oneOf) {
+          for (const loader of nestedRule.use) {
+            if (loader.loader === require.resolve("@svgr/webpack")) {
+              loader.options.svgoConfig = NEW_SVGO_CONFIG;
+              updated = true;
+            }
+          }
+        }
+      }
+    }
+  } catch (e) {
+    console.error("Error while attempting to modify svgo config: " + e);
+  }
+  if (!updated) {
+    throw new Error("Failed to update svgo config");
+  }
+};