diff --git a/frontend/src/styles/vendor.scss b/frontend/src/styles/vendor.scss
index 8ce1826bcdb2..0b716f23a71d 100644
--- a/frontend/src/styles/vendor.scss
+++ b/frontend/src/styles/vendor.scss
@@ -1,5 +1,25 @@
 @import "fontawesome-5"; // the screenshotting library has some issues with css layers
 
+/* fontawesome icon styles do not respect the hidden class from the hidden layer.
+* By having these rules outside any layer we make sure that the display none is
+* correctly applied when an element possesses both a .fa* class and the hidden class */
+.fas.hidden,
+.fab.hidden,
+.fa.hidden,
+.far.hidden {
+  display: none;
+}
+
+// same for invisible
+.fas.invisible,
+.fab.invisible,
+.fa.invisible,
+.far.invisible {
+  opacity: 0;
+  pointer-events: none;
+  visibility: hidden;
+}
+
 @import "normalize.css" layer(normalize);
 @layer vendor {
   @import "slim-select/styles";