diff --git a/res/css/components/atoms/_Icon.pcss b/res/css/components/atoms/_Icon.pcss
index 1db3278fe9..b9d994e43f 100644
--- a/res/css/components/atoms/_Icon.pcss
+++ b/res/css/components/atoms/_Icon.pcss
@@ -15,9 +15,13 @@ limitations under the License.
 */
 
 .mx_Icon {
+    box-sizing: border-box;
+    display: inline-block;
+    mask-origin: content-box;
     mask-position: center;
     mask-repeat: no-repeat;
     mask-size: contain;
+    padding: 1px;
 }
 
 .mx_Icon_16 {
diff --git a/src/components/atoms/Icon.tsx b/src/components/atoms/Icon.tsx
index 6ec0194cc9..5778022764 100644
--- a/src/components/atoms/Icon.tsx
+++ b/src/components/atoms/Icon.tsx
@@ -56,6 +56,7 @@ export const Icon: React.FC<IconProps> = ({
 
     const styles: React.CSSProperties = {
         maskImage: `url("${iconTypeMap.get(type)}")`,
+        WebkitMaskImage: `url("${iconTypeMap.get(type)}")`,
     };
 
     return (