diff --git a/playbook/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx b/playbook/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx
index 779bbd211e..e64a16a35c 100644
--- a/playbook/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx
+++ b/playbook/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx
@@ -10,7 +10,7 @@ const CollapsibleCustomMain = () => {
         collapsed={isCollapsed}
     >
           <Background 
-              backgroundColor="white" 
+              backgroundColor="clear" 
               cursor="pointer"
               htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
               position="sticky" 
@@ -23,8 +23,9 @@ const CollapsibleCustomMain = () => {
               >
                 <Title 
                     size={4} 
-                    text="Custom Main Section" 
+                    text="Custom Main Section"
                 />
+                <Collapsible.Icon collapsed={isCollapsed}/>
               </Flex>
           </Background>
       <Collapsible.Content padding="none">
diff --git a/playbook/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx b/playbook/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx
index c884d2bcaa..96381b1c70 100644
--- a/playbook/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx
+++ b/playbook/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx
@@ -10,7 +10,7 @@ const CollapsibleCustomMainWithIcon = () => {
         collapsed={isCollapsed}
     >
           <Background 
-              backgroundColor="white" 
+              backgroundColor="clear" 
               cursor="pointer"
               htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
               position="sticky" 
@@ -23,7 +23,7 @@ const CollapsibleCustomMainWithIcon = () => {
               >
                 <Title 
                     size={4} 
-                    text="Custom Main Section" 
+                    text="Custom Main Section"
                 />
                 <Collapsible.Icon collapsed={isCollapsed}/>
               </Flex>
diff --git a/playbook/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx b/playbook/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx
index 25af96c346..6fc37726bc 100644
--- a/playbook/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx
+++ b/playbook/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx
@@ -7,6 +7,7 @@ const CollapsibleIcons = (props) => {
   <>
   <Collapsible
       icon={['plus','minus']}
+      iconColor='white'
   >
     <Collapsible.Main {...props}>
       <div>{'Main Section'}</div>
diff --git a/playbook/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx b/playbook/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx
index 3155da3f8f..5393b60eb3 100644
--- a/playbook/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx
+++ b/playbook/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx
@@ -17,6 +17,7 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
+        iconColor='white'
         padding="none"
     >
       <Collapsible.Main padding="sm" 
@@ -35,6 +36,7 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
+        iconColor='white'
         padding="none"
     >
       <Collapsible.Main padding="sm" 
@@ -53,6 +55,7 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
+        iconColor='white'
         padding="none"
     >
         <Collapsible.Main padding="sm"