diff --git a/src/files-ui/components/file-card/FileCard.scss b/src/files-ui/components/file-card/FileCard.scss
index 5162e6eaeffacf045b5e444ff8361469fe51d168..24ecc2a46c95c074a07d6671261c4c17b0ee9d81 100644
--- a/src/files-ui/components/file-card/FileCard.scss
+++ b/src/files-ui/components/file-card/FileCard.scss
@@ -220,7 +220,7 @@
 }
 
 //// ICONS
-.files-ui-file-icon {
+/* .files-ui-file-icon {
   font-size: 0.7rem;
   min-width: 19px;
   min-height: 19px;
@@ -229,6 +229,7 @@
   border-radius: 50%;
   background-color: rgba(32, 33, 36, 0.65);
   word-break: break-word;
+  box-sizing: content-box;
   &:hover {
     background-color: rgba(32, 33, 36, 0.85);
   }
@@ -238,4 +239,4 @@
       background-color: rgba(154, 160, 166, 0.85);
     }
   }
-}
\ No newline at end of file
+} */
\ No newline at end of file
diff --git a/src/files-ui/components/file-card/FileCard.tsx b/src/files-ui/components/file-card/FileCard.tsx
index 7dc71ff89002a3c34ea4ba125e2b92b5c84046fe..a4b68f6138f1cf87f7b000f36d10914d44d688a5 100644
--- a/src/files-ui/components/file-card/FileCard.tsx
+++ b/src/files-ui/components/file-card/FileCard.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import { FileCardProps } from "./FileCardProps";
 import "./FileCard.scss";
+import "./../icons/IconStyles.scss";
 import "./components/FileCardPaper.scss";
 import { fileSizeFormater, getLocalFileItemData, handleClickUtil, shrinkWord } from "../../core";
 import useProgress from "../file-mosaic/hooks/useProgress";
diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.scss b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.scss
index c6d2aaf3d6757ad6d02520895fd21d9b079762a2..2a96708b12cc32db423ebc2d275fa279ddb26cb3 100644
--- a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.scss
+++ b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.scss
@@ -173,7 +173,7 @@
 }
 
 //// ICONS
-.files-ui-file-icon {
+/* .files-ui-file-icon {
   font-size: 0.7rem;
   min-width: 19px;
   min-height: 19px;
@@ -182,6 +182,7 @@
   border-radius: 50%;
   background-color: rgba(32, 33, 36, 0.65);
   word-break: break-word;
+  box-sizing: content-box;
   &:hover {
     background-color: rgba(32, 33, 36, 0.85);
   }
@@ -192,3 +193,4 @@
     }
   }
 }
+ */
\ No newline at end of file
diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
index 455a3af3a80d58acae140ea45299d490fe4c51b8..2cc106e334297eb186377ff435eecc9d18fcdeb0 100644
--- a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
+++ b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
@@ -5,8 +5,9 @@ import {
   getLocalFileItemData,
   handleClickUtil,
 } from "../../../../core";
-import { FileMosaicProps } from "./FileMosaicProps";
 import "./FileMosaic.scss";
+import "./../../../icons/IconStyles.scss";
+import { FileMosaicProps } from "./FileMosaicProps";
 import LayerContainer from "../file-mosaic-layer/LayerContainer";
 import Layer from "../file-mosaic-layer/Layer";
 import FileMosaicName from "../FileMosaicName/FileMosaicName";
@@ -115,7 +116,7 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
   );
 
   //The size formatted and rounded in 2 decimals
-  const sizeFormatted: string| undefined = fileSizeFormater(localSize);
+  const sizeFormatted: string | undefined = fileSizeFormater(localSize);
   //alwaysActive
   const [showInfo, setShowInfo] = React.useState<boolean>(false);
 
diff --git a/src/files-ui/components/icons/Cancel/Cancel.tsx b/src/files-ui/components/icons/Cancel/Cancel.tsx
index 738852e46547149f2729e84d2c0d94e43fd1702c..77709d16585b7c9c661cb50d285e93a4fb35ac96 100644
--- a/src/files-ui/components/icons/Cancel/Cancel.tsx
+++ b/src/files-ui/components/icons/Cancel/Cancel.tsx
@@ -1,9 +1,9 @@
-import React, { FC } from "react";
+import * as React from "react";
 import { parseSize } from "../utils/utils";
 import { CancelProps } from "./CancelProps";
 import { handleClickUtil } from "../../../core";
 
-const Cancel: FC<CancelProps> = (props: CancelProps) => {
+const Cancel: React.FC<CancelProps> = (props: CancelProps) => {
   const { size, color, colorFill, onClick, style, className } = props;
   const finalSize = parseSize(size);
   const finalStyle = style ? style : {};
diff --git a/src/files-ui/components/icons/IconStyles.scss b/src/files-ui/components/icons/IconStyles.scss
new file mode 100644
index 0000000000000000000000000000000000000000..03d0a0d90a04908379159c2bafb2ada540399169
--- /dev/null
+++ b/src/files-ui/components/icons/IconStyles.scss
@@ -0,0 +1,20 @@
+.files-ui-file-icon {
+  font-size: 0.7rem;
+  min-width: 19px;
+  min-height: 19px;
+  margin: 0;
+  padding: 2px 2px;
+  border-radius: 50%;
+  background-color: rgba(32, 33, 36, 0.65);
+  word-break: break-word;
+  box-sizing: content-box;
+  &:hover {
+    background-color: rgba(32, 33, 36, 0.85);
+  }
+  &.dark-mode {
+    background-color: rgba(154, 160, 166, 0.65);
+    &:hover {
+      background-color: rgba(154, 160, 166, 0.85);
+    }
+  }
+}