diff --git a/packages/dialog/package.json b/packages/dialog/package.json
index 678c8eaf26..b54936031a 100644
--- a/packages/dialog/package.json
+++ b/packages/dialog/package.json
@@ -51,13 +51,14 @@
     "author": "",
     "license": "Apache-2.0",
     "devDependencies": {
-        "@spectrum-css/dialog": "^3.0.0-beta.5"
+        "@spectrum-css/dialog": "^3.0.0-beta.6"
     },
     "dependencies": {
         "@spectrum-web-components/base": "^0.1.3",
-        "@spectrum-web-components/button": "^0.9.4",
+        "@spectrum-web-components/action-button": "^0.0.1",
         "@spectrum-web-components/icon": "^0.6.3",
         "@spectrum-web-components/icons-ui": "^0.3.3",
+        "@spectrum-web-components/icons-workflow": "^0.3.6",
         "@spectrum-web-components/modal": "^0.0.1",
         "@spectrum-web-components/shared": "^0.7.4",
         "@spectrum-web-components/underlay": "^0.3.3",
diff --git a/packages/dialog/src/Dialog.ts b/packages/dialog/src/Dialog.ts
index ffeda80d5b..fe9261629b 100644
--- a/packages/dialog/src/Dialog.ts
+++ b/packages/dialog/src/Dialog.ts
@@ -21,14 +21,11 @@ import {
 } from '@spectrum-web-components/base';
 
 import '@spectrum-web-components/rule/sp-rule.js';
-import '@spectrum-web-components/button/sp-action-button.js';
-import alertMediumStyles from '@spectrum-web-components/icon/src/spectrum-icon-alert-medium.css.js';
-import crossLargeStyles from '@spectrum-web-components/icon/src/spectrum-icon-cross-large.css.js';
+import '@spectrum-web-components/action-button/sp-action-button.js';
+import crossStyles from '@spectrum-web-components/icon/src/spectrum-icon-cross.css.js';
 import '@spectrum-web-components/icon/sp-icon.js';
-import {
-    AlertMediumIcon,
-    CrossLargeIcon,
-} from '@spectrum-web-components/icons-ui';
+import { Cross500Icon } from '@spectrum-web-components/icons-ui';
+import { AlertIcon } from '@spectrum-web-components/icons-workflow';
 import { ObserveSlotPresence } from '@spectrum-web-components/shared';
 
 import styles from './dialog.css.js';
@@ -44,7 +41,7 @@ export class Dialog extends ObserveSlotPresence(SpectrumElement, [
     '[slot="button"]',
 ]) {
     public static get styles(): CSSResultArray {
-        return [styles, alertMediumStyles, crossLargeStyles];
+        return [styles, crossStyles];
     }
 
     @query('.content')
@@ -117,29 +114,15 @@ export class Dialog extends ObserveSlotPresence(SpectrumElement, [
                 ></slot>
                 ${this.error
                     ? html`
-                          <sp-icon class="type-icon alert-medium">
-                              ${AlertMediumIcon({ hidden: true })}
+                          <sp-icon class="type-icon">
+                              ${AlertIcon({ hidden: true })}
                           </sp-icon>
                       `
                     : html``}
-                ${this.dismissable
-                    ? html`
-                          <sp-action-button
-                              class="close-button"
-                              label="Close"
-                              quiet
-                              @click=${this.close}
-                          >
-                              <sp-icon class="cross-large">
-                                  ${CrossLargeIcon({ hidden: true })}
-                              </sp-icon>
-                          </sp-action-button>
-                      `
-                    : html``}
                 ${this.noDivider
                     ? html``
                     : html`
-                          <sp-rule size="medium" class="divider"></sp-rule>
+                          <sp-rule size="m" class="divider"></sp-rule>
                       `}
                 <div class="content">
                     <slot @slotchange=${this.onContentSlotChange}></slot>
@@ -162,6 +145,25 @@ export class Dialog extends ObserveSlotPresence(SpectrumElement, [
                           </sp-button-group>
                       `
                     : html``}
+                ${this.dismissable
+                    ? html`
+                          <sp-action-button
+                              class="close-button"
+                              label="Close"
+                              quiet
+                              size="m"
+                              @click=${this.close}
+                          >
+                              <sp-icon
+                                  class="spectrum-UIIcon-Cross500"
+                                  size="m"
+                                  slot="icon"
+                              >
+                                  ${Cross500Icon()}
+                              </sp-icon>
+                          </sp-action-button>
+                      `
+                    : html``}
             </div>
         `;
     }
diff --git a/packages/dialog/src/spectrum-dialog.css b/packages/dialog/src/spectrum-dialog.css
index ce375a8673..f9673a18c7 100644
--- a/packages/dialog/src/spectrum-dialog.css
+++ b/packages/dialog/src/spectrum-dialog.css
@@ -56,10 +56,9 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 .grid {
     /* .spectrum-Dialog .spectrum-Dialog-grid */
     display: grid;
-    grid-template-columns: var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(
-            0,
-            auto
-        ) var(--spectrum-dialog-confirm-padding);
+    grid-template-columns:
+        var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0, auto)
+        var(--spectrum-dialog-confirm-padding);
     grid-template-rows: auto var(--spectrum-dialog-confirm-padding) auto auto 1fr auto var(
             --spectrum-dialog-confirm-padding
         );
@@ -193,12 +192,9 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 }
 :host([dismissable]) .grid {
     /* .spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid */
-    grid-template-columns: var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(
-            0,
-            auto
-        ) minmax(0, var(--spectrum-global-dimension-size-400)) var(
-            --spectrum-dialog-confirm-padding
-        );
+    grid-template-columns:
+        var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0, auto)
+        minmax(0, var(--spectrum-global-dimension-size-400)) var(--spectrum-dialog-confirm-padding);
     grid-template-rows: auto var(--spectrum-dialog-confirm-padding) auto auto 1fr auto var(
             --spectrum-dialog-confirm-padding
         );
@@ -299,10 +295,9 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 }
 @media screen and (max-inline-size: 700px) {
     .grid {
-        grid-template-columns: var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(
-                0,
-                auto
-            ) var(--spectrum-dialog-confirm-padding);
+        grid-template-columns:
+            var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0, auto)
+            var(--spectrum-dialog-confirm-padding);
         grid-template-areas: 'hero hero    hero    hero        hero        hero' '.    .       .       .           .           .' '.    heading heading heading     typeIcon    .' '.    header  header  header      header      .' '.    divider divider divider     divider     .' '.    content content content     content     .' '.    footer  footer  buttonGroup buttonGroup .' '.    .       .       .           .           .';
     }
     :host([dismissable]) .grid,
@@ -312,12 +307,9 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
             );
     }
     :host([dismissable]) .grid {
-        grid-template-columns: var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(
-                0,
-                auto
-            ) minmax(0, var(--spectrum-global-dimension-size-400)) var(
-                --spectrum-dialog-confirm-padding
-            );
+        grid-template-columns:
+            var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0, auto)
+            minmax(0, var(--spectrum-global-dimension-size-400)) var(--spectrum-dialog-confirm-padding);
         grid-template-areas: 'hero hero    hero    hero        hero        hero        hero' '.    .       .       .           .           closeButton closeButton' '.    heading heading heading     typeIcon    closeButton closeButton' '.    header  header  header      header      header      .' '.    divider divider divider     divider     divider     .' '.    content content content     content     content     .' '.    footer  footer  buttonGroup buttonGroup buttonGroup .' '.    .       .       .           .           .           .';
     }
     .header {
diff --git a/packages/dialog/test/dialog-wrapper.test.ts b/packages/dialog/test/dialog-wrapper.test.ts
index 14c1854e31..512620a5ad 100644
--- a/packages/dialog/test/dialog-wrapper.test.ts
+++ b/packages/dialog/test/dialog-wrapper.test.ts
@@ -15,7 +15,8 @@ import { spy } from 'sinon';
 
 import '../sp-dialog-wrapper.js';
 import { Dialog, DialogWrapper } from '../';
-import { Button, ActionButton } from '@spectrum-web-components/button';
+import { ActionButton } from '@spectrum-web-components/action-button';
+import { Button } from '@spectrum-web-components/button';
 import { Underlay } from '@spectrum-web-components/underlay';
 import {
     wrapperLabeledHero,
diff --git a/packages/dialog/tsconfig.json b/packages/dialog/tsconfig.json
index 4594d40d7a..cd21025002 100644
--- a/packages/dialog/tsconfig.json
+++ b/packages/dialog/tsconfig.json
@@ -7,7 +7,9 @@
     "include": ["*.ts", "src/*.ts"],
     "exclude": ["test/*.ts", "stories/*.ts"],
     "references": [
-        { "path": "../button" },
+        { "path": "../action-button" },
+        { "path": "../icons-ui" },
+        { "path": "../icons-workflow" },
         { "path": "../shared" },
         { "path": "../underlay" }
     ]