diff --git a/index.html b/index.html
index 768f31c..6148272 100644
--- a/index.html
+++ b/index.html
@@ -49,7 +49,7 @@
     </header>
     <main>
         <p>Colored circles that can pulse</p>
-        <status-indicator status="positive" pulse>
+        <status-indicator style="--status-icon-size: 32px" status="positive" pulse>
             All systems operational
         </status-indicator>
         <br />
diff --git a/src/status-indicator.ts b/src/status-indicator.ts
index e84c7ef..da948b3 100644
--- a/src/status-indicator.ts
+++ b/src/status-indicator.ts
@@ -1,5 +1,7 @@
 import { WebComponent, html } from 'web-component-base'
 
+type StatusType = 'default' | 'active' | 'positive' | 'intermediary' | 'negative'
+
 class StatusIndicator extends WebComponent {
     static shadowRootInit: ShadowRootInit = {
         mode: 'closed'
@@ -10,7 +12,7 @@ class StatusIndicator extends WebComponent {
         pulse: false
     }
 
-    #indicatorColor: any = {
+    #indicatorColor: Record<StatusType, string> = {
         default: '216, 226, 233',
         active: '0, 149, 255',
         positive: '75, 210, 143',
@@ -18,7 +20,7 @@ class StatusIndicator extends WebComponent {
         negative: '255, 77, 77'
     }
 
-    #pulseAnimationCSSRules = {
+    #pulseAnimationCSSRules: Partial<CSSStyleDeclaration> = {
         animationName: 'pulse',
         animationDuration: '2s',
         animationTimingFunction: 'ease-in-out',