improvement(settings): mark the self-host section with a sprout

Server was already doing double duty for MCP servers and Mothership, and the
icon set ships no botanical glyph, so the mark is a text emoji.

Author: TheodoreSpeaks

apps/sim/components/icons.tsx

@@ -8944,3 +8944,24 @@ export function ZohoDeskIcon(props: SVGProps<SVGSVGElement>) {
     </svg>
   )
 }
+
+/**
+ * The Self-host settings mark — a sprout, for a deployment you grow yourself.
+ *
+ * Text rather than an SVG because the icon set ships no botanical glyph. It is
+ * consequently the one nav mark that keeps its own colors instead of inheriting
+ * `--text-icon`, and it renders in the host platform's emoji font. The explicit
+ * font size pins the glyph to the 14px the line icons around it optically read
+ * as, independent of whatever the consumer's `size-*` box sets.
+ */
+export function SproutIcon({ className }: { className?: string }) {
+  return (
+    <span
+      className={`inline-flex items-center justify-center text-sm leading-none ${className ?? ''}`}
+      role='img'
+      aria-label='Self-host'
+    >
+      🌱
+    </span>
+  )
+}

apps/sim/components/settings/navigation.test.ts

@@ -1,7 +1,9 @@
 /**
  * @vitest-environment node
  */
+import { createElement } from 'react'
 import { resetEnvFlagsMock, resetEnvMock, setEnv, setEnvFlags } from '@sim/testing'
+import { renderToStaticMarkup } from 'react-dom/server'
 import { afterAll, beforeEach, describe, expect, it } from 'vitest'
 import {
   ACCOUNT_SETTINGS_ITEMS,
@@ -177,6 +179,16 @@ describe('settings navigation boundaries', () => {
     ).not.toContain('self-host')
   })
 
+  /**
+   * The sprout is a text glyph, not an SVG line icon — a swap back to an icon
+   * component would silently drop the mark this section is recognized by.
+   */
+  it('marks the Self-host section with the sprout glyph', () => {
+    const selfHost = buildUnifiedSettingsNavigation().find(({ id }) => id === 'self-host')
+
+    expect(renderToStaticMarkup(createElement(selfHost!.icon, {}))).toContain('\u{1F331}')
+  })
+
   it('keeps the Sandboxes section on the pre-Daytona E2B flag alone', () => {
     setEnv({ NEXT_PUBLIC_SANDBOX_ENABLED: undefined, NEXT_PUBLIC_E2B_ENABLED: 'true' })
 

apps/sim/components/settings/navigation.ts

@@ -24,7 +24,7 @@ import {
   Wrench,
 } from '@sim/emcn/icons'
 import { type PermissionType, permissionSatisfies } from '@sim/platform-authz/workspace'
-import { CodeIcon, McpIcon } from '@/components/icons'
+import { CodeIcon, McpIcon, SproutIcon } from '@/components/icons'
 import { getEnv, isTruthy } from '@/lib/core/config/env'
 import {
   isAccessControlEnabled,
@@ -690,7 +690,7 @@ export const SETTINGS_SECTION_REGISTRY: readonly SettingsSectionRegistryEntry[]
   },
   {
     label: 'Self-host',
-    icon: Server,
+    icon: SproutIcon,
     unified: {
       id: 'self-host',
       description: 'Manage this deployment from the Sim managed service.',