diff --git a/docs/api/spinner.md b/docs/api/spinner.md
index dc5b55a36c3..a9af39e6dc3 100644
--- a/docs/api/spinner.md
+++ b/docs/api/spinner.md
@@ -37,6 +37,14 @@ import Colors from '@site/static/usage/v7/spinner/theming/colors/index.md';
+### Styling
+
+You may use custom CSS to style the spinner. For example, you can resize the spinner by setting the width and height.
+
+import Resizing from '@site/static/usage/v7/spinner/theming/resizing/index.md';
+
+
+
### CSS Custom Properties
import CSSProps from '@site/static/usage/v7/spinner/theming/css-properties/index.md';
diff --git a/static/usage/v7/spinner/theming/resizing/angular/example_component_css.md b/static/usage/v7/spinner/theming/resizing/angular/example_component_css.md
new file mode 100644
index 00000000000..845d1a9af47
--- /dev/null
+++ b/static/usage/v7/spinner/theming/resizing/angular/example_component_css.md
@@ -0,0 +1,6 @@
+```css
+ion-spinner {
+ width: 100px;
+ height: 100px;
+}
+```
diff --git a/static/usage/v7/spinner/theming/resizing/angular/example_component_html.md b/static/usage/v7/spinner/theming/resizing/angular/example_component_html.md
new file mode 100644
index 00000000000..4b3b8d665b4
--- /dev/null
+++ b/static/usage/v7/spinner/theming/resizing/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/spinner/theming/resizing/demo.html b/static/usage/v7/spinner/theming/resizing/demo.html
new file mode 100644
index 00000000000..acebb2ef5d2
--- /dev/null
+++ b/static/usage/v7/spinner/theming/resizing/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+ Spinner
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/spinner/theming/resizing/index.md b/static/usage/v7/spinner/theming/resizing/index.md
new file mode 100644
index 00000000000..5d4b142092e
--- /dev/null
+++ b/static/usage/v7/spinner/theming/resizing/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v7/spinner/theming/resizing/javascript.md b/static/usage/v7/spinner/theming/resizing/javascript.md
new file mode 100644
index 00000000000..9c875eb4951
--- /dev/null
+++ b/static/usage/v7/spinner/theming/resizing/javascript.md
@@ -0,0 +1,10 @@
+```html
+
+
+
+```
diff --git a/static/usage/v7/spinner/theming/resizing/react.md b/static/usage/v7/spinner/theming/resizing/react.md
new file mode 100644
index 00000000000..117d82c8541
--- /dev/null
+++ b/static/usage/v7/spinner/theming/resizing/react.md
@@ -0,0 +1,9 @@
+```tsx
+import React from 'react';
+import { IonSpinner } from '@ionic/react';
+
+function Example() {
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v7/spinner/theming/resizing/react/main_css.md b/static/usage/v7/spinner/theming/resizing/react/main_css.md
new file mode 100644
index 00000000000..845d1a9af47
--- /dev/null
+++ b/static/usage/v7/spinner/theming/resizing/react/main_css.md
@@ -0,0 +1,6 @@
+```css
+ion-spinner {
+ width: 100px;
+ height: 100px;
+}
+```
diff --git a/static/usage/v7/spinner/theming/resizing/react/main_tsx.md b/static/usage/v7/spinner/theming/resizing/react/main_tsx.md
new file mode 100644
index 00000000000..f990cb1e738
--- /dev/null
+++ b/static/usage/v7/spinner/theming/resizing/react/main_tsx.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonSpinner } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/spinner/theming/resizing/vue.md b/static/usage/v7/spinner/theming/resizing/vue.md
new file mode 100644
index 00000000000..52ae17f7694
--- /dev/null
+++ b/static/usage/v7/spinner/theming/resizing/vue.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+
+
+
+
+```