diff --git a/packages/view/src/components/RefreshButton/RefreshButton.scss b/packages/view/src/components/RefreshButton/RefreshButton.scss
index 9104aa15..1328c5ae 100644
--- a/packages/view/src/components/RefreshButton/RefreshButton.scss
+++ b/packages/view/src/components/RefreshButton/RefreshButton.scss
@@ -3,7 +3,7 @@
   height: 30px;
 }
 
-.refresh-button-icon {
+.refresh-button__icon {
   &--loading {
     animation: rotate 2s infinite;
   }
diff --git a/packages/view/src/components/RefreshButton/RefreshButton.tsx b/packages/view/src/components/RefreshButton/RefreshButton.tsx
index 8db455bc..490bae97 100644
--- a/packages/view/src/components/RefreshButton/RefreshButton.tsx
+++ b/packages/view/src/components/RefreshButton/RefreshButton.tsx
@@ -26,7 +26,7 @@ const RefreshButton = () => {
       sx={{ color: "white" }}
     >
       <ReplayCircleFilledRoundedIcon
-        className={cn("refresh-button-icon", { "refresh-button-icon--loading": loading })}
+        className={cn("refresh-button__icon", { "refresh-button__icon--loading": loading })}
       />
     </IconButton>
   );