1 files changed, 74 insertions, 0 deletions
diff --git a/docs/guide/components/status-icon/readme.md b/docs/guide/components/status-icon/readme.md
new file mode 100644
index 00000000..0c9cc394
--- /dev/null
+++ b/docs/guide/components/status-icon/readme.md
@@ -0,0 +1,74 @@
+# StatusIcon
+
+The StatusIcon component is used to add an icon that represents one of the following statuses:
+
+- success
+- info
+- warning
+- danger
+
+To use this component:
+1. Import it into the single file component (SFC)
+2. Add the `<status-icon />` tag
+3. Add the optional status prop and set the value to one of the statuses
+4. Add the translated text to associate with the icon
+
+```vue
+import StatusIcon from '@/components/Global/StatusIcon'
+```
+
+## Status icon with default status
+
+```vue
+<status-icon />
+```
+
+![StatusIcon default icon example](./secondary.png)
+
+## Status icon with success status
+
+```vue
+<status-icon
+:status="success"
+/>
+```
+
+![StatusIcon success icon example](./success.png)
+
+## Status icon with info status
+
+```vue
+<status-icon
+:status="info"
+/>
+```
+
+![StatusIcon info icon example](./info.png)
+
+## Status icon with warning status
+
+```vue
+<status-icon
+:status="warning"
+/>
+```
+
+![StatusIcon warning icon example](./warning.png)
+
+## Status icon with danger status
+
+```vue
+<status-icon
+:status="danger"
+/>
+```
+
+![StatusIcon danger icon example](./danger.png)
+
+### Example of AppHeader with status icon
+
+![AppHeader with status icon example](./appHeaderWithStatusIcon.png)
+
+### Example of Event logs with status icon
+
+![EventLogs with status icon example](./eventLogsWithSatusIcon.png)