diff --git a/landing/keyserver-faq.css b/landing/keyserver-faq.css
--- a/landing/keyserver-faq.css
+++ b/landing/keyserver-faq.css
@@ -34,6 +34,13 @@
 
 .icon {
   margin-left: 24px;
+  transform: rotate(0deg);
+  transition: transform 500ms;
+}
+
+.activeIcon {
+  transform: rotate(180deg);
+  transition: transform 500ms;
 }
 
 .answerContainer {
diff --git a/landing/keyserver-faq.react.js b/landing/keyserver-faq.react.js
--- a/landing/keyserver-faq.react.js
+++ b/landing/keyserver-faq.react.js
@@ -35,6 +35,11 @@
         [css.activeAnswerContainer]: activeFAQIndex === index,
       });
 
+      const iconClassName = classNames({
+        [css.icon]: true,
+        [css.activeIcon]: activeFAQIndex === index,
+      });
+
       return (
         <div
           key={index}
@@ -45,7 +50,7 @@
             <p className={questionClassName}>{faq.question}</p>
             <FontAwesomeIcon
               size="sm"
-              className={css.icon}
+              className={iconClassName}
               icon={faChevronDown}
             />
           </div>