Use an SVG verified icon

app/icons/COPYING.md

@@ -4,6 +4,7 @@
 - fediverse.svg - Modified from Wikipedia, CC0  
 - home-squared.svg - Modified from Tabler icons, MIT  
 - pen-plus.svg - Modified from Tabler icons, MIT  
+- verified.svg - Created by Alex Gleason. CC0
 
 Tabler: https://tabler-icons.io/  
 Feather: https://feathericons.com/  

app/icons/verified.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon"  viewBox="0 0 20 20" width="20" height="20" fill="none">
+  <circle class="bg" cx="10" cy="10" r="10" fill="#0482d8"/>
+  <path d="M5.586 10l3.193 3.193 6.385-6.385" stroke="#fff" stroke-width="3.193" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

app/soapbox/components/svg_icon.js

@@ -13,18 +13,19 @@ export default class SvgIcon extends React.PureComponent {
 
   static propTypes = {
     src: PropTypes.string.isRequired,
+    alt: PropTypes.string,
     className: PropTypes.string,
   };
 
   render() {
-    const { src, className, ...other } = this.props;
+    const { src, className, alt, ...other } = this.props;
 
     return (
       <div
         className={classNames('svg-icon', className)}
         {...other}
       >
-        <InlineSVG src={src} />
+        <InlineSVG src={src} title={alt} />
       </div>
     );
   }

app/soapbox/components/verification_badge.js

@@ -1,9 +1,20 @@
 import React from 'react';
+import { useIntl, defineMessages } from 'react-intl';
 
-const VerificationBadge = () => (
+import Icon from 'soapbox/components/icon';
+
+const messages = defineMessages({
+  verified: { id: 'account.verified', defaultMessage: 'Verified Account' },
+});
+
+const VerificationBadge = () => {
+  const intl = useIntl();
+
+  return (
     <span className='verified-icon'>
-    <span className='visuallyhidden'>Verified Account</span>
+      <Icon src={require('icons/verified.svg')} alt={intl.formatMessage(messages.verified)} />
     </span>
   );
+};
 
 export default VerificationBadge;

app/styles/ui.scss

@@ -738,32 +738,8 @@ article:last-child > .domain {
   height: 15px;
   flex-shrink: 0;
 
-  &::before {
-    display: block;
-    content: "";
-    position: absolute;
-    background-color: #00a3ed;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    border-radius: 50%;
-  }
-
-  &::after {
-    display: block;
-    position: absolute;
-    content: '\f00c';
-    font-family: 'Font Awesome 5 Free';
-    font-weight: 900;
-    font-size: 0.6em;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
-    color: #fff;
-    line-height: 15px;
-    width: 15px;
-    height: 15px;
-    text-align: center;
+  .svg-icon svg > .bg {
+    fill: var(--brand-color);
   }
 }