refactor(icons): install and use @heroicons/react (#1438)

src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx

@@ -1,3 +1,4 @@
+import { AtSymbolIcon } from '@heroicons/react/outline';
 import { useRouter } from 'next/router';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -33,20 +34,7 @@ const UserNotificationSettings: React.FC = ({ children }) => {
       text: intl.formatMessage(messages.email),
       content: (
         <span className="flex items-center">
-          <svg
-            className="h-4 mr-2"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"
-            />
-          </svg>
+          <AtSymbolIcon className="h-4 mr-2" />
           {intl.formatMessage(messages.email)}
         </span>
       ),