diff --git a/sparkle/src/components/Citation.tsx b/sparkle/src/components/Citation.tsx
index 2813539d3c50..a34158675ece 100644
--- a/sparkle/src/components/Citation.tsx
+++ b/sparkle/src/components/Citation.tsx
@@ -3,14 +3,14 @@ import React, { ReactNode } from "react";
 import { DocumentTextStrokeIcon, ImageStrokeIcon } from "@sparkle/icons/stroke";
 import { classNames } from "@sparkle/lib/utils";
 import {
-  Confluence,
-  Drive,
-  Github,
-  Intercom,
-  Microsoft,
-  Notion,
-  Slack,
-  Zendesk,
+  ConfluenceLogo,
+  DriveLogo,
+  GithubLogo,
+  IntercomLogo,
+  MicrosoftLogo,
+  NotionLogo,
+  SlackLogo,
+  ZendeskLogo,
 } from "@sparkle/logo/platforms";
 
 import {
@@ -51,15 +51,15 @@ interface CitationProps {
 }
 
 const typeIcons = {
-  confluence: Confluence,
+  confluence: ConfluenceLogo,
   document: DocumentTextStrokeIcon,
-  github: Github,
-  google_drive: Drive,
-  intercom: Intercom,
-  microsoft: Microsoft,
-  zendesk: Zendesk,
-  notion: Notion,
-  slack: Slack,
+  github: GithubLogo,
+  google_drive: DriveLogo,
+  intercom: IntercomLogo,
+  microsoft: MicrosoftLogo,
+  zendesk: ZendeskLogo,
+  notion: NotionLogo,
+  slack: SlackLogo,
   image: ImageStrokeIcon,
 };
 
diff --git a/sparkle/src/components/DropzoneOverlay.tsx b/sparkle/src/components/DropzoneOverlay.tsx
index fb94819f0527..73f55a548863 100644
--- a/sparkle/src/components/DropzoneOverlay.tsx
+++ b/sparkle/src/components/DropzoneOverlay.tsx
@@ -1,7 +1,8 @@
 import Lottie, { LottieRefCurrentProps } from "lottie-react";
 import React, { useEffect, useRef, useState } from "react";
 
-import { ArrowUpOnSquareIcon, Icon } from "@sparkle/_index";
+import { Icon } from "@sparkle/components";
+import { ArrowUpOnSquareIcon } from "@sparkle/icons";
 import anim from "@sparkle/lottie/dragArea";
 
 export interface DropzoneOverlayProps {
diff --git a/sparkle/src/components/index.ts b/sparkle/src/components/index.ts
index 629216932e8d..8836205c38ed 100644
--- a/sparkle/src/components/index.ts
+++ b/sparkle/src/components/index.ts
@@ -16,6 +16,7 @@ export { ContextItem } from "./ContextItem";
 export { DataTable } from "./DataTable";
 export { Dialog } from "./Dialog";
 export { DropdownMenu } from "./DropdownMenu";
+export { default as DropzoneOverlay } from "./DropzoneOverlay";
 export { ElementDialog } from "./ElementDialog";
 export { ElementModal } from "./ElementModal";
 export { EmojiPicker } from "./EmojiPicker";
diff --git a/sparkle/src/logo/dust/index.ts b/sparkle/src/logo/dust/index.ts
index a09243089062..d71aa9512010 100644
--- a/sparkle/src/logo/dust/index.ts
+++ b/sparkle/src/logo/dust/index.ts
@@ -1,10 +1,10 @@
-export { default as LogoHorizontalColor } from "./LogoHorizontalColor";
-export { default as LogoHorizontalColorLayer1 } from "./LogoHorizontalColorLayer1";
-export { default as LogoHorizontalColorLayer2 } from "./LogoHorizontalColorLayer2";
-export { default as LogoHorizontalDark } from "./LogoHorizontalDark";
-export { default as LogoHorizontalWhite } from "./LogoHorizontalWhite";
-export { default as LogoSquareColor } from "./LogoSquareColor";
-export { default as LogoSquareColorLayer1 } from "./LogoSquareColorLayer1";
-export { default as LogoSquareColorLayer2 } from "./LogoSquareColorLayer2";
-export { default as LogoSquareDark } from "./LogoSquareDark";
-export { default as LogoSquareWhite } from "./LogoSquareWhite";
+export { default as LogoHorizontalColorLogo } from "./LogoHorizontalColor";
+export { default as LogoHorizontalColorLayer1Logo } from "./LogoHorizontalColorLayer1";
+export { default as LogoHorizontalColorLayer2Logo } from "./LogoHorizontalColorLayer2";
+export { default as LogoHorizontalDarkLogo } from "./LogoHorizontalDark";
+export { default as LogoHorizontalWhiteLogo } from "./LogoHorizontalWhite";
+export { default as LogoSquareColorLogo } from "./LogoSquareColor";
+export { default as LogoSquareColorLayer1Logo } from "./LogoSquareColorLayer1";
+export { default as LogoSquareColorLayer2Logo } from "./LogoSquareColorLayer2";
+export { default as LogoSquareDarkLogo } from "./LogoSquareDark";
+export { default as LogoSquareWhiteLogo } from "./LogoSquareWhite";
diff --git a/sparkle/src/logo/index.ts b/sparkle/src/logo/index.ts
index c07132c4fc8a..47e9a757361e 100644
--- a/sparkle/src/logo/index.ts
+++ b/sparkle/src/logo/index.ts
@@ -1,48 +1,3 @@
-export {
-  LogoHorizontalColor as LogoHorizontalColorLogo,
-  LogoHorizontalColorLayer1 as LogoHorizontalColorLogoLayer1,
-  LogoHorizontalColorLayer2 as LogoHorizontalColorLogoLayer2,
-  LogoHorizontalDark as LogoHorizontalDarkLogo,
-  LogoHorizontalWhite as LogoHorizontalWhiteLogo,
-  LogoSquareColor as LogoSquareColorLogo,
-  LogoSquareColorLayer1 as LogoSquareColorLogoLayer1,
-  LogoSquareColorLayer2 as LogoSquareColorLogoLayer2,
-  LogoSquareDark as LogoSquareDarkLogo,
-  LogoSquareWhite as LogoSquareWhiteLogo,
-} from "./dust";
-export { Logo } from "./Logo";
-export {
-  Ai21 as Ai21Logo,
-  Anthropic as AnthropicLogo,
-  AnthropicWhite as AnthropicWhiteLogo,
-  Claude as ClaudeLogo,
-  Cohere as CohereLogo,
-  Confluence as ConfluenceLogo,
-  Drive as DriveLogo,
-  Gemini as GeminiLogo,
-  Github as GithubLogo,
-  GithubWhite as GithubWhiteLogo,
-  Gong as GongLogo,
-  GoogleDoc as GoogleDocLogo,
-  Google as GoogleLogo,
-  GooglePdf as GooglePdfLogo,
-  GoogleSlide as GoogleSlideLogo,
-  GoogleSpreadsheet as GoogleSpreadsheetLogo,
-  Gpt3 as Gpt3Logo,
-  Gpt4 as Gpt4Logo,
-  HuggingFace as HuggingFaceLogo,
-  Intercom as IntercomLogo,
-  MicrosoftExcel as MicrosoftExcelLogo,
-  Microsoft as MicrosoftLogo,
-  MicrosoftPowerpoint as MicrosoftPowerpointLogo,
-  MicrosoftWord as MicrosoftWordLogo,
-  Mistral as MistralLogo,
-  Notion as NotionLogo,
-  Office as OfficeLogo,
-  Openai as OpenaiLogo,
-  OpenaiWhite as OpenaiWhiteLogo,
-  Replicate as ReplicateLogo,
-  Salesforce as SalesforceLogo,
-  Slack as SlackLogo,
-  Zapier as ZapierLogo,
-} from "./platforms";
+export * from "./dust";
+export * from "./Logo";
+export * from "./platforms";
diff --git a/sparkle/src/logo/platforms/index.ts b/sparkle/src/logo/platforms/index.ts
index ef18cab89616..d686ca849df5 100644
--- a/sparkle/src/logo/platforms/index.ts
+++ b/sparkle/src/logo/platforms/index.ts
@@ -1,34 +1,34 @@
-export { default as Ai21 } from "./Ai21";
-export { default as Anthropic } from "./Anthropic";
-export { default as AnthropicWhite } from "./AnthropicWhite";
-export { default as Claude } from "./Claude";
-export { default as Cohere } from "./Cohere";
-export { default as Confluence } from "./Confluence";
-export { default as Drive } from "./Drive";
-export { default as Gemini } from "./Gemini";
-export { default as Github } from "./Github";
-export { default as GithubWhite } from "./GithubWhite";
-export { default as Gong } from "./Gong";
-export { default as Google } from "./Google";
-export { default as GoogleDoc } from "./GoogleDoc";
-export { default as GooglePdf } from "./GooglePdf";
-export { default as GoogleSlide } from "./GoogleSlide";
-export { default as GoogleSpreadsheet } from "./GoogleSpreadsheet";
-export { default as Gpt3 } from "./Gpt3";
-export { default as Gpt4 } from "./Gpt4";
-export { default as HuggingFace } from "./HuggingFace";
-export { default as Intercom } from "./Intercom";
-export { default as Microsoft } from "./Microsoft";
-export { default as MicrosoftExcel } from "./MicrosoftExcel";
-export { default as MicrosoftPowerpoint } from "./MicrosoftPowerpoint";
-export { default as MicrosoftWord } from "./MicrosoftWord";
-export { default as Mistral } from "./Mistral";
-export { default as Notion } from "./Notion";
-export { default as Office } from "./Office";
-export { default as Openai } from "./Openai";
-export { default as OpenaiWhite } from "./OpenaiWhite";
-export { default as Replicate } from "./Replicate";
-export { default as Salesforce } from "./Salesforce";
-export { default as Slack } from "./Slack";
-export { default as Zapier } from "./Zapier";
-export { default as Zendesk } from "./Zendesk";
+export { default as Ai21Logo } from "./Ai21";
+export { default as AnthropicLogo } from "./Anthropic";
+export { default as AnthropicWhiteLogo } from "./AnthropicWhite";
+export { default as ClaudeLogo } from "./Claude";
+export { default as CohereLogo } from "./Cohere";
+export { default as ConfluenceLogo } from "./Confluence";
+export { default as DriveLogo } from "./Drive";
+export { default as GeminiLogo } from "./Gemini";
+export { default as GithubLogo } from "./Github";
+export { default as GithubWhiteLogo } from "./GithubWhite";
+export { default as GongLogo } from "./Gong";
+export { default as GoogleLogo } from "./Google";
+export { default as GoogleDocLogo } from "./GoogleDoc";
+export { default as GooglePdfLogo } from "./GooglePdf";
+export { default as GoogleSlideLogo } from "./GoogleSlide";
+export { default as GoogleSpreadsheetLogo } from "./GoogleSpreadsheet";
+export { default as Gpt3Logo } from "./Gpt3";
+export { default as Gpt4Logo } from "./Gpt4";
+export { default as HuggingFaceLogo } from "./HuggingFace";
+export { default as IntercomLogo } from "./Intercom";
+export { default as MicrosoftLogo } from "./Microsoft";
+export { default as MicrosoftExcelLogo } from "./MicrosoftExcel";
+export { default as MicrosoftPowerpointLogo } from "./MicrosoftPowerpoint";
+export { default as MicrosoftWordLogo } from "./MicrosoftWord";
+export { default as MistralLogo } from "./Mistral";
+export { default as NotionLogo } from "./Notion";
+export { default as OfficeLogo } from "./Office";
+export { default as OpenaiLogo } from "./Openai";
+export { default as OpenaiWhiteLogo } from "./OpenaiWhite";
+export { default as ReplicateLogo } from "./Replicate";
+export { default as SalesforceLogo } from "./Salesforce";
+export { default as SlackLogo } from "./Slack";
+export { default as ZapierLogo } from "./Zapier";
+export { default as ZendeskLogo } from "./Zendesk";
diff --git a/sparkle/src/stories/ContextItem.stories.tsx b/sparkle/src/stories/ContextItem.stories.tsx
index 6d605ca070cf..025609a8c283 100644
--- a/sparkle/src/stories/ContextItem.stories.tsx
+++ b/sparkle/src/stories/ContextItem.stories.tsx
@@ -1,7 +1,12 @@
 import type { Meta } from "@storybook/react";
 import React from "react";
 
-import { Drive, Github, Notion, Slack } from "@sparkle/logo/platforms";
+import {
+  DriveLogo,
+  GithubLogo,
+  NotionLogo,
+  SlackLogo,
+} from "@sparkle/logo/platforms";
 
 import {
   Avatar,
@@ -52,14 +57,14 @@ export const ListItemExample = () => (
       />
       <ContextItem
         title="Notion"
-        visual={<ContextItem.Visual visual={Notion} />}
+        visual={<ContextItem.Visual visual={NotionLogo} />}
         onClick={() => console.log("clicked item")}
       >
         <ContextItem.Description description="Teamspaces “General” and “Public”, pages “Engineering”, “Team Life”, “Marketing”, “Brand”, “Getting Started at Dust”, “Brand”, “Design”, “Product Decisions”, “Hiring”, “Man" />
       </ContextItem>
       <ContextItem
         title="Drive"
-        visual={<ContextItem.Visual visual={Drive} />}
+        visual={<ContextItem.Visual visual={DriveLogo} />}
         onClick={() => console.log("clicked")}
       >
         <ContextItem.Description description="Hello you" />
@@ -71,7 +76,7 @@ export const ListItemExample = () => (
       />
       <ContextItem
         title="Slack"
-        visual={<ContextItem.Visual visual={Slack} />}
+        visual={<ContextItem.Visual visual={SlackLogo} />}
         action={
           <Button.List>
             <Button
@@ -95,7 +100,7 @@ export const ListItemExample = () => (
         title="Github"
         subElement={<>By: Stan</>}
         action={<SliderToggle size="xs" />}
-        visual={<ContextItem.Visual visual={Github} />}
+        visual={<ContextItem.Visual visual={GithubLogo} />}
       >
         <>
           <div className="s-py-2">
diff --git a/sparkle/src/stories/Hover3D.stories.tsx b/sparkle/src/stories/Hover3D.stories.tsx
index 546afdfed757..ea81102606cd 100644
--- a/sparkle/src/stories/Hover3D.stories.tsx
+++ b/sparkle/src/stories/Hover3D.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from "@storybook/react";
 import React from "react";
 
-import { LogoSquareColor } from "@sparkle/logo/dust";
+import { LogoSquareColorLogo } from "@sparkle/logo/dust";
 
 import { Div3D, GithubLogo, Hover3D, Icon } from "../index_with_tw_base";
 
@@ -38,7 +38,7 @@ export const Hover3DExample = () => (
       <div>
         <Hover3D className="s-rounded-[24px] s-bg-slate-800 s-p-8">
           <Div3D depth={60}>
-            <Icon visual={LogoSquareColor} size="2xl" />
+            <Icon visual={LogoSquareColorLogo} size="2xl" />
           </Div3D>
         </Hover3D>
       </div>
@@ -88,7 +88,7 @@ export const Hover3DExample = () => (
           fullscreenSensible
         >
           <Div3D depth={60}>
-            <Icon visual={LogoSquareColor} size="2xl" />
+            <Icon visual={LogoSquareColorLogo} size="2xl" />
           </Div3D>
         </Hover3D>
       </div>
diff --git a/sparkle/src/stories/Logo.stories.tsx b/sparkle/src/stories/Logo.stories.tsx
index 5bfa00ed2668..dcc82185bc28 100644
--- a/sparkle/src/stories/Logo.stories.tsx
+++ b/sparkle/src/stories/Logo.stories.tsx
@@ -1,16 +1,16 @@
 import React from "react";
 
-import { Div3D, Hover3D, LogoSquareColorLogoLayer2 } from "..";
+import { Div3D, Hover3D, LogoSquareColorLayer2Logo } from "..";
 import {
-  LogoHorizontalColor,
-  LogoHorizontalColorLayer1,
-  LogoHorizontalColorLayer2,
-  LogoHorizontalDark,
-  LogoHorizontalWhite,
-  LogoSquareColor,
-  LogoSquareColorLayer1,
-  LogoSquareDark,
-  LogoSquareWhite,
+  LogoHorizontalColorLayer1Logo,
+  LogoHorizontalColorLayer2Logo,
+  LogoHorizontalColorLogo,
+  LogoHorizontalDarkLogo,
+  LogoHorizontalWhiteLogo,
+  LogoSquareColorLayer1Logo,
+  LogoSquareColorLogo,
+  LogoSquareDarkLogo,
+  LogoSquareWhiteLogo,
 } from "../logo/dust";
 
 export default {
@@ -35,19 +35,19 @@ export const DustLogo = () => (
   <>
     <div style={gridStyle}>
       <div className="s-p-6">
-        <LogoHorizontalColor className="s-h-8 s-w-32" />
+        <LogoHorizontalColorLogo className="s-h-8 s-w-32" />
         <div style={itemStyle as React.CSSProperties} className="s-text-sm">
           LogoHorizontalColorLogo
         </div>
       </div>
       <div className="s-p-6">
-        <LogoHorizontalDark className="s-h-8 s-w-32" />
+        <LogoHorizontalDarkLogo className="s-h-8 s-w-32" />
         <div style={itemStyle as React.CSSProperties} className="s-text-sm">
           LogoHorizontalDarkLogo
         </div>
       </div>
       <div className="s-bg-slate-800 s-p-6">
-        <LogoHorizontalWhite className="s-h-8 s-w-32" />
+        <LogoHorizontalWhiteLogo className="s-h-8 s-w-32" />
         <div
           style={itemStyle as React.CSSProperties}
           className="s-text-sm s-text-white"
@@ -59,19 +59,19 @@ export const DustLogo = () => (
 
     <div style={gridStyle}>
       <div className="s-p-6">
-        <LogoSquareColor className="s-h-16 s-w-16" />
+        <LogoSquareColorLogo className="s-h-16 s-w-16" />
         <div style={itemStyle as React.CSSProperties} className="s-text-sm">
           LogoHorizontalColorLogo
         </div>
       </div>
       <div className="s-p-6">
-        <LogoSquareDark className="s-h-16 s-w-16" />
+        <LogoSquareDarkLogo className="s-h-16 s-w-16" />
         <div style={itemStyle as React.CSSProperties} className="s-text-sm">
           LogoHorizontalDarkLogo
         </div>
       </div>
       <div className="s-bg-slate-800 s-p-6">
-        <LogoSquareWhite className="s-h-16 s-w-16" />
+        <LogoSquareWhiteLogo className="s-h-16 s-w-16" />
         <div
           style={itemStyle as React.CSSProperties}
           className="s-text-sm s-text-white"
@@ -85,10 +85,10 @@ export const DustLogo = () => (
       <div className="s-p-6">
         <Hover3D className="s-relative s-h-8 s-w-32">
           <Div3D depth={0} className="s-h-8 s-w-32">
-            <LogoHorizontalColorLayer1 className="s-h-8 s-w-32" />
+            <LogoHorizontalColorLayer1Logo className="s-h-8 s-w-32" />
           </Div3D>
           <Div3D depth={25} className="s-absolute s-top-0">
-            <LogoHorizontalColorLayer2 className="s-h-8 s-w-32" />
+            <LogoHorizontalColorLayer2Logo className="s-h-8 s-w-32" />
           </Div3D>
         </Hover3D>
         <div style={itemStyle as React.CSSProperties} className="s-text-sm">
@@ -98,10 +98,10 @@ export const DustLogo = () => (
       <div className="s-p-6">
         <Hover3D className="s-relative s-h-16 s-w-16">
           <Div3D depth={0} className="s-h-16 s-w-16">
-            <LogoSquareColorLayer1 className="s-h-16 s-w-16" />
+            <LogoSquareColorLayer1Logo className="s-h-16 s-w-16" />
           </Div3D>
           <Div3D depth={25} className="s-absolute s-top-0">
-            <LogoSquareColorLogoLayer2 className="s-h-16 s-w-16" />
+            <LogoSquareColorLayer2Logo className="s-h-16 s-w-16" />
           </Div3D>
         </Hover3D>
         <div style={itemStyle as React.CSSProperties} className="s-text-sm">