CVE-2021-32641 (published 2021-06-04T21:15Z)

auth0-lock is Auth0's signin solution. Versions of nauth0-lock before and including `11.30.0` are vulnerable to reflected XSS. An attacker can execute arbitrary code when the library's `flashMessage` feature is utilized and user input or data from URL parameters is incorporated into the `flashMessage` or the library's `languageDictionary` feature is utilized and user input or data from URL parameters is incorporated into the `languageDictionary`. The vulnerability is patched in version 11.30.1.

Severity: MEDIUM
CVSS v2 base score: 4.3 (AV:N/AC:M/Au:N/C:N/I:P/A:N)
CVSS v3 base score: 6.1, MEDIUM (CVSS:3.1/AV:N/AC:L/PR:N/UI:R/S:C/C:L/I:L/A:N)

Weakness information:
cwe_id: CWE-79
cwe_name: Improper Neutralization of Input During Web Page Generation ('Cross-site Scripting')
description: The product does not neutralize or incorrectly neutralizes user-controllable input before it is placed in output that is used as a web page that is served to other users.
extended_description: 
            Cross-site scripting (XSS) vulnerabilities occur when:
            
               Untrusted data enters a web application, typically from a web request.
               The web application dynamically generates a web page that contains this untrusted data.
               During page generation, the application does not prevent the data from containing content that is executable by a web browser, such as JavaScript, HTML tags, HTML attributes, mouse events, Flash, ActiveX, etc.
               A victim visits the generated web page through a web browser, which contains malicious script that was injected using the untrusted data.
               Since the script comes from a web page that was sent by the web server, the victim's web browser executes the malicious script in the context of the web server's domain.
               This effectively violates the intention of the web browser's same-origin policy, which states that scripts in one domain should not be able to access resources or run code in a different domain.
            
            There are three main kinds of XSS:
            
               
                  Type 1: Reflected XSS (or Non-Persistent) - 
         			The server reads data directly from the HTTP request and reflects it back in the HTTP response. Reflected XSS exploits occur when an attacker causes a victim to supply dangerous content to a vulnerable web application, which is then reflected back to the victim and executed by the web browser. The most common mechanism for delivering malicious content is to include it as a parameter in a URL that is posted publicly or e-mailed directly to the victim. URLs constructed in this manner constitute the core of many phishing schemes, whereby an attacker convinces a victim to visit a URL that refers to a vulnerable site. After the site reflects the attacker's content back to the victim, the content is executed by the victim's browser.
               
                  Type 2: Stored XSS (or Persistent) - 
               The application stores dangerous data in a database, message forum, visitor log, or other trusted data store. At a later time, the dangerous data is subsequently read back into the application and included in dynamic content. From an attacker's perspective, the optimal place to inject malicious content is in an area that is displayed to either many users or particularly interesting users. Interesting users typically have elevated privileges in the application or interact with sensitive data that is valuable to the attacker. If one of these users executes malicious content, the attacker may be able to perform privileged operations on behalf of the user or gain access to sensitive data belonging to the user. For example, the attacker might inject XSS into a log message, which might not be handled properly when an administrator views the logs.
            
               
                  Type 0: DOM-Based XSS - 
               In DOM-based XSS, the client performs the injection of XSS into the page; in the other types, the server performs the injection. DOM-based XSS generally involves server-controlled, trusted script that is sent to the client, such as Javascript that performs sanity checks on a form before the user submits it. If the server-supplied script processes user-supplied data and then injects it back into the web page (such as with dynamic HTML), then DOM-based XSS is possible.
            
            
            Once the malicious script is injected, the attacker can perform a variety of malicious activities. The attacker could transfer private information, such as cookies that may include session information, from the victim's machine to the attacker. The attacker could send malicious requests to a web site on behalf of the victim, which could be especially dangerous to the site if the victim has administrator privileges to manage that site. Phishing attacks could be used to emulate trusted web sites and trick the victim into entering a password, allowing the attacker to compromise the victim's account on that web site. Finally, the script could exploit a vulnerability in the web browser itself possibly taking over the victim's machine, sometimes referred to as "drive-by hacking."
            In many cases, the attack can be launched without the victim even being aware of it. Even with careful users, attackers frequently use a variety of methods to encode the malicious portion of the attack, such as URL encoding or Unicode, so the request looks less suspicious.
         
         

Fix information:
repo_url: https://github.com/auth0/lock
commit_details: repo_url: https://github.com/auth0/lock
author: Steve Hobbs
author_date: 2021-06-04 10:57:07+01:00
msg: Merge pull request from GHSA-jr3j-whm4-9wwm

* Convert svg strings to elements

* Sanitizing usage of dangerouslySetInnerHTML

Co-authored-by: David <david.patrick@auth0.com>
repository: repo_url: https://github.com/auth0/lock
repo_name: auth0/lock
description: Auth0's signin solution
repo_language: JavaScript
owner: auth0
file_changes: filename: .eslintrc.json
change_type: ModificationType.MODIFY
diff: @@ -9,6 +9,7 @@
     "react/display-name": 0,
     "react/prop-types": 1,
     "react/no-find-dom-node": 1,
-    "react/no-string-refs": 1
+    "react/no-string-refs": 1,
+    "react/no-danger": 2
   }
 }

programming_language: JavaScript
filename: README.md
change_type: ModificationType.MODIFY
diff: @@ -586,7 +586,8 @@ var options = {
     name: "newsletter",
     prefill: "true",
     placeholder: "I hereby agree that I want to receive marketing emails from your company",
-    // placeholderHTML - is an optional field  and overrides the value of placeholder
+    // placeholderHTML - is an optional field and overrides the value of placeholder
+    // do not use user inputted data for HTML fields as they are vulnerable to XSS
     placeholderHTML: "<b>I hereby agree that I want to receive marketing emails from your company</b>",
     // ariaLabel - is an optional field
     ariaLabel: "Activate Newsletter"

programming_language: Markdown
filename: package.json
change_type: ModificationType.MODIFY
diff: @@ -106,6 +106,7 @@
     "auth0-js": "^9.16.2",
     "auth0-password-policies": "^1.0.2",
     "blueimp-md5": "2.3.1",
+    "dompurify": "^2.2.8",
     "immutable": "^3.7.3",
     "jsonp": "^0.2.1",
     "password-sheriff": "^1.1.0",

programming_language: JavaScript
filename: password_reset_confirmation.test.jsx.snap
change_type: ModificationType.MODIFY
diff: @@ -7,13 +7,34 @@ exports[`PasswordResetConfirmation renders correctly 1`] = `
   <div
     className="auth0-lock-confirmation-content"
   >
-    <span
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "<svg focusable=\\"false\\" width=\\"56px\\" height=\\"56px\\" viewBox=\\"0 0 52 52\\" version=\\"1.1\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" class=\\"checkmark\\"> <circle cx=\\"26\\" cy=\\"26\\" r=\\"25\\" fill=\\"none\\" class=\\"checkmark__circle\\"></circle> <path fill=\\"none\\" d=\\"M14.1 27.2l7.1 7.2 16.7-16.8\\" class=\\"checkmark__check\\"></path> </svg>",
-        }
-      }
-    />
+    <span>
+      <svg
+        className="checkmark"
+        focusable="false"
+        height="56px"
+        version="1.1"
+        viewBox="0 0 52 52"
+        width="56px"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+      >
+         
+        <circle
+          className="checkmark__circle"
+          cx="26"
+          cy="26"
+          fill="none"
+          r="25"
+        />
+         
+        <path
+          className="checkmark__check"
+          d="M14.1 27.2l7.1 7.2 16.7-16.8"
+          fill="none"
+        />
+         
+      </svg>
+    </span>
     <p />
   </div>
 </div>

programming_language: CoffeeScript
filename: signed_up_confirmation.test.jsx.snap
change_type: ModificationType.MODIFY
diff: @@ -7,13 +7,34 @@ exports[`SignedUpConfirmation renders correctly 1`] = `
   <div
     className="auth0-lock-confirmation-content"
   >
-    <span
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "<svg focusable=\\"false\\" width=\\"56px\\" height=\\"56px\\" viewBox=\\"0 0 52 52\\" version=\\"1.1\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" class=\\"checkmark\\"> <circle cx=\\"26\\" cy=\\"26\\" r=\\"25\\" fill=\\"none\\" class=\\"checkmark__circle\\"></circle> <path fill=\\"none\\" d=\\"M14.1 27.2l7.1 7.2 16.7-16.8\\" class=\\"checkmark__check\\"></path> </svg>",
-        }
-      }
-    />
+    <span>
+      <svg
+        className="checkmark"
+        focusable="false"
+        height="56px"
+        version="1.1"
+        viewBox="0 0 52 52"
+        width="56px"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+      >
+         
+        <circle
+          className="checkmark__circle"
+          cx="26"
+          cy="26"
+          fill="none"
+          r="25"
+        />
+         
+        <path
+          className="checkmark__check"
+          d="M14.1 27.2l7.1 7.2 16.7-16.8"
+          fill="none"
+        />
+         
+      </svg>
+    </span>
     <p />
   </div>
 </div>

programming_language: CoffeeScript
filename: actions.test.js
change_type: ModificationType.MODIFY
diff: @@ -37,7 +37,7 @@ describe('Login with connection scopes', () => {
   });
 
   describe('for an SSO connection', () => {
-    it.only('passes connectionScopes to the connection', () => {
+    it('passes connectionScopes to the connection', () => {
       lock = l.setup('__lock__', 'client', 'domain', {
         auth: {
           connectionScopes: {
@@ -67,7 +67,7 @@ describe('Login with connection scopes', () => {
   });
 
   describe('for a non-SSO connection', () => {
-    it.only('passes connectionScopes to the connection', () => {
+    it('passes connectionScopes to the connection', () => {
       lock = l.setup('__lock__', 'client', 'domain', {
         auth: {
           connectionScopes: {

programming_language: JavaScript
filename: email_sent_confirmation.test.jsx.snap
change_type: ModificationType.MODIFY
diff: @@ -7,41 +7,102 @@ exports[`EmailSentConfirmation renders correctly 1`] = `
   <span
     aria-label="close"
     className="auth0-lock-close-button"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "<svg aria-hidden=\\"true\\" focusable=\\"false\\" enable-background=\\"new 0 0 128 128\\" version=\\"1.1\\" viewBox=\\"0 0 128 128\\" xml:space=\\"preserve\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\"><g><polygon fill=\\"#373737\\" points=\\"123.5429688,11.59375 116.4765625,4.5185547 64.0019531,56.9306641 11.5595703,4.4882813     4.4882813,11.5595703 56.9272461,63.9970703 4.4570313,116.4052734 11.5244141,123.4814453 63.9985352,71.0683594     116.4423828,123.5117188 123.5126953,116.4414063 71.0732422,64.0019531   \\"></polygon></g></svg>",
-      }
-    }
     id="__lock-id__-close-button"
     onClick={[Function]}
     onKeyPress={[Function]}
     role="button"
     tabIndex={0}
-  />
+  >
+    <svg
+      aria-hidden="true"
+      enableBackground="new 0 0 128 128"
+      focusable="false"
+      version="1.1"
+      viewBox="0 0 128 128"
+      xmlSpace="preserve"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <g>
+        <polygon
+          fill="#373737"
+          points="123.5429688,11.59375 116.4765625,4.5185547 64.0019531,56.9306641 11.5595703,4.4882813     4.4882813,11.5595703 56.9272461,63.9970703 4.4570313,116.4052734 11.5244141,123.4814453 63.9985352,71.0683594     116.4423828,123.5117188 123.5126953,116.4414063 71.0732422,64.0019531   "
+        />
+      </g>
+    </svg>
+  </span>
   <span
     aria-label="back"
     className="auth0-lock-back-button"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "<svg aria-hidden=\\"true\\" focusable=\\"false\\" enable-background=\\"new 0 0 24 24\\" version=\\"1.0\\" viewBox=\\"0 0 24 24\\" xml:space=\\"preserve\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\"> <polyline fill=\\"none\\" points=\\"12.5,21 3.5,12 12.5,3 \\" stroke=\\"#000000\\" stroke-miterlimit=\\"10\\" stroke-width=\\"2\\"></polyline> <line fill=\\"none\\" stroke=\\"#000000\\" stroke-miterlimit=\\"10\\" stroke-width=\\"2\\" x1=\\"22\\" x2=\\"3.5\\" y1=\\"12\\" y2=\\"12\\"></line> </svg>",
-      }
-    }
     id="__lock-id__-back-button"
     onClick={[Function]}
     onKeyPress={[Function]}
     role="button"
     tabIndex={0}
-  />
+  >
+    <svg
+      aria-hidden="true"
+      enableBackground="new 0 0 24 24"
+      focusable="false"
+      version="1.0"
+      viewBox="0 0 24 24"
+      xmlSpace="preserve"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+       
+      <polyline
+        fill="none"
+        points="12.5,21 3.5,12 12.5,3 "
+        stroke="#000000"
+        strokeMiterlimit="10"
+        strokeWidth="2"
+      />
+       
+      <line
+        fill="none"
+        stroke="#000000"
+        strokeMiterlimit="10"
+        strokeWidth="2"
+        x1="22"
+        x2="3.5"
+        y1="12"
+        y2="12"
+      />
+       
+    </svg>
+  </span>
   <div
     className="auth0-lock-confirmation-content"
   >
-    <span
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "<svg focusable=\\"false\\" width=\\"56px\\" height=\\"56px\\" viewBox=\\"0 0 52 52\\" version=\\"1.1\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" class=\\"checkmark\\"> <circle cx=\\"26\\" cy=\\"26\\" r=\\"25\\" fill=\\"none\\" class=\\"checkmark__circle\\"></circle> <path fill=\\"none\\" d=\\"M14.1 27.2l7.1 7.2 16.7-16.8\\" class=\\"checkmark__check\\"></path> </svg>",
-        }
-      }
-    />
+    <span>
+      <svg
+        className="checkmark"
+        focusable="false"
+        height="56px"
+        version="1.1"
+        viewBox="0 0 52 52"
+        width="56px"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+      >
+         
+        <circle
+          className="checkmark__circle"
+          cx="26"
+          cy="26"
+          fill="none"
+          r="25"
+        />
+         
+        <path
+          className="checkmark__check"
+          d="M14.1 27.2l7.1 7.2 16.7-16.8"
+          fill="none"
+        />
+         
+      </svg>
+    </span>
     <p>
       <span
         dangerouslySetInnerHTML={
@@ -59,13 +120,31 @@ exports[`EmailSentConfirmation renders correctly 1`] = `
       >
         
          
-        <span
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "<svg focusable=\\"false\\" height=\\"32px\\" style=\\"enable-background:new 0 0 32 32;\\" version=\\"1.1\\" viewBox=\\"0 0 32 32\\" width=\\"32px\\" xml:space=\\"preserve\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\"> <path d=\\"M27.877,19.662c0.385-1.23,0.607-2.531,0.607-3.884c0-7.222-5.83-13.101-13.029-13.194v4.238    c4.863,0.093,8.793,4.071,8.793,8.956c0,0.678-0.088,1.332-0.232,1.966l-3.963-1.966l2.76,8.199l8.197-2.762L27.877,19.662z\\"></path> <path d=\\"M7.752,16.222c0-0.678,0.088-1.332,0.232-1.967l3.963,1.967l-2.76-8.199L0.99,10.785l3.133,1.553    c-0.384,1.23-0.607,2.531-0.607,3.885c0,7.223,5.83,13.1,13.03,13.194v-4.238C11.682,25.086,7.752,21.107,7.752,16.222z\\"></path> </svg>",
+        <span>
+          <svg
+            focusable="false"
+            height="32px"
+            style={
+              Object {
+                "enableBackground": "new 0 0 32 32",
+              }
             }
-          }
-        />
+            version="1.1"
+            viewBox="0 0 32 32"
+            width="32px"
+            xmlSpace="preserve"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlnsXlink="http://www.w3.org/1999/xlink"
+          >
+             
+            <path
+              d="M27.877,19.662c0.385-1.23,0.607-2.531,0.607-3.884c0-7.222-5.83-13.101-13.029-13.194v4.238    c4.863,0.093,8.793,4.071,8.793,8.956c0,0.678-0.088,1.332-0.232,1.966l-3.963-1.966l2.76,8.199l8.197-2.762L27.877,19.662z"
+            />
+            <path
+              d="M7.752,16.222c0-0.678,0.088-1.332,0.232-1.967l3.963,1.967l-2.76-8.199L0.99,10.785l3.133,1.553    c-0.384,1.23-0.607,2.531-0.607,3.885c0,7.223,5.83,13.1,13.03,13.194v-4.238C11.682,25.086,7.752,21.107,7.752,16.222z"
+            />
+          </svg>
+        </span>
       </a>
     </span>
   </div>

programming_language: CoffeeScript
filename: signed_in_confirmation.test.jsx.snap
change_type: ModificationType.MODIFY
diff: @@ -7,13 +7,34 @@ exports[`SignedInConfirmation renders correctly 1`] = `
   <div
     className="auth0-lock-confirmation-content"
   >
-    <span
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "<svg focusable=\\"false\\" width=\\"56px\\" height=\\"56px\\" viewBox=\\"0 0 52 52\\" version=\\"1.1\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" class=\\"checkmark\\"> <circle cx=\\"26\\" cy=\\"26\\" r=\\"25\\" fill=\\"none\\" class=\\"checkmark__circle\\"></circle> <path fill=\\"none\\" d=\\"M14.1 27.2l7.1 7.2 16.7-16.8\\" class=\\"checkmark__check\\"></path> </svg>",
-        }
-      }
-    />
+    <span>
+      <svg
+        className="checkmark"
+        focusable="false"
+        height="56px"
+        version="1.1"
+        viewBox="0 0 52 52"
+        width="56px"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+      >
+         
+        <circle
+          className="checkmark__circle"
+          cx="26"
+          cy="26"
+          fill="none"
+          r="25"
+        />
+         
+        <path
+          className="checkmark__check"
+          d="M14.1 27.2l7.1 7.2 16.7-16.8"
+          fill="none"
+        />
+         
+      </svg>
+    </span>
     <p />
   </div>
 </div>

programming_language: CoffeeScript
filename: phone_number_pane.test.jsx.snap
change_type: ModificationType.MODIFY
diff: @@ -5,7 +5,7 @@ Array [
   1,
   "location",
   "",
-  "<svg focusable=\\"false\\" width=\\"14px\\" height=\\"14px\\" viewBox=\\"0 0 14 14\\" version=\\"1.1\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" xmlns:sketch=\\"http://www.bohemiancoding.com/sketch/ns\\" class=\\"auth0-lock-icon auth0-lock-icon-box auth0-lock-icon-location\\"><g stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" sketch:type=\\"MSPage\\"><g id=\\"Lock\\" transform=\\"translate(-201.000000, -3519.000000)\\" fill=\\"#919191\\"><g id=\\"SMS\\" transform=\\"translate(153.000000, 3207.000000)\\"><g transform=\\"translate(35.000000, 299.000000)\\"><path id=\\"Fill-349-Copy\\" d=\\"M22.4023125,22.8 C22.543625,21.9425 22.625,20.9975 22.625,20 L26.125,20 C26.125,21.316875 25.69275,22.52 24.9853125,23.5175 C24.3255625,23.2025 23.4383125,22.953125 22.4023125,22.8 L22.4023125,22.8 Z M21.372875,25.954375 C21.72725,25.3725 22.0234375,24.5675 22.2404375,23.6225 C22.8975625,23.696875 23.483375,23.80625 23.9624375,23.9375 L24.67075,23.9375 C23.829875,24.92625 22.6849375,25.6525 21.372875,25.954375 L21.372875,25.954375 Z M20,26.125 C19.412875,26.125 18.896625,25.105625 18.579,23.5525 C19.034,23.521875 19.503875,23.5 20,23.5 C20.4956875,23.5 20.966,23.521875 21.421,23.5525 C21.1029375,25.105625 20.5866875,26.125 20,26.125 L20,26.125 Z M15.3288125,23.9375 L16.0375625,23.9375 C16.5161875,23.80625 17.1024375,23.696875 17.759125,23.6225 C17.976125,24.5675 18.2723125,25.3725 18.6266875,25.954375 C17.3150625,25.6525 16.170125,24.92625 15.3288125,23.9375 L15.3288125,23.9375 Z M15.0146875,23.5175 C14.3068125,22.52 13.875,21.316875 13.875,20 L17.375,20 C17.375,20.9975 17.4559375,21.9425 17.59725,22.8 C16.56125,22.953125 15.6744375,23.2025 15.0146875,23.5175 L15.0146875,23.5175 Z M15.030875,16.45625 C15.6796875,16.78 16.5634375,17.03375 17.60075,17.195625 C17.501,17.799375 17.428375,18.4425 17.3964375,19.125 L13.951125,19.125 C14.0933125,18.13625 14.477,17.230625 15.030875,16.45625 L15.030875,16.45625 Z M18.6266875,14.04125 C18.27275,14.623125 17.977,15.42375 17.760875,16.373125 C17.1265,16.294375 16.558625,16.189375 16.0944375,16.0625 L15.34325,16.0625 C16.180625,15.069375 17.3168125,14.343125 18.6266875,14.04125 L18.6266875,14.04125 Z M20,13.875 C20.585375,13.875 21.0959375,14.894375 21.4118125,16.443125 C20.959875,16.478125 20.492625,16.5 20,16.5 C19.5069375,16.5 19.0396875,16.478125 18.58775,16.443125 C18.903625,14.894375 19.4141875,13.875 20,13.875 L20,13.875 Z M18.2749375,19.125 C18.3020625,18.473125 18.362,17.865 18.441625,17.29625 C18.9408125,17.344375 19.4596875,17.375 20,17.375 C20.5403125,17.375 21.0591875,17.344375 21.5579375,17.29625 C21.638,17.865 21.6979375,18.473125 21.724625,19.125 L18.2749375,19.125 L18.2749375,19.125 Z M21.75,20 C21.75,20.97125 21.6786875,21.88125 21.5631875,22.699375 C21.06225,22.65125 20.5420625,22.625 20,22.625 C19.4579375,22.625 18.9373125,22.65125 18.436375,22.699375 C18.320875,21.88125 18.25,20.97125 18.25,20 L21.75,20 L21.75,20 Z M24.6563125,16.0625 L23.905125,16.0625 C23.441375,16.189375 22.8730625,16.294375 22.2386875,16.373125 C22.0225625,15.42375 21.7268125,14.623125 21.372875,14.04125 C22.68275,14.343125 23.8189375,15.069375 24.6563125,16.0625 L24.6563125,16.0625 Z M24.9686875,16.45625 C25.5225625,17.230625 25.90625,18.13625 26.048875,19.125 L22.603125,19.125 C22.5711875,18.4425 22.499,17.799375 22.39925,17.195625 C23.4365625,17.03375 24.3203125,16.78 24.9686875,16.45625 L24.9686875,16.45625 Z M20,13 C16.1338125,13 13,16.1325 13,20 C13,23.863125 16.1338125,27 20,27 C23.86575,27 27,23.863125 27,20 C27,16.1325 23.86575,13 20,13 L20,13 Z\\"></path></g></g></g></g></svg>",
+  <UNDEFINED />,
 ]
 `;
 
@@ -23,7 +23,45 @@ exports[`PhoneNumberPane disables input when submitting 1`] = `
 <div>
   <div
     data-__type="select_input"
-    data-icon="<svg focusable=\\"false\\" width=\\"14px\\" height=\\"14px\\" viewBox=\\"0 0 14 14\\" version=\\"1.1\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" xmlns:sketch=\\"http://www.bohemiancoding.com/sketch/ns\\" class=\\"auth0-lock-icon auth0-lock-icon-box auth0-lock-icon-location\\"><g stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" sketch:type=\\"MSPage\\"><g id=\\"Lock\\" transform=\\"translate(-201.000000, -3519.000000)\\" fill=\\"#919191\\"><g id=\\"SMS\\" transform=\\"translate(153.000000, 3207.000000)\\"><g transform=\\"translate(35.000000, 299.000000)\\"><path id=\\"Fill-349-Copy\\" d=\\"M22.4023125,22.8 C22.543625,21.9425 22.625,20.9975 22.625,20 L26.125,20 C26.125,21.316875 25.69275,22.52 24.9853125,23.5175 C24.3255625,23.2025 23.4383125,22.953125 22.4023125,22.8 L22.4023125,22.8 Z M21.372875,25.954375 C21.72725,25.3725 22.0234375,24.5675 22.2404375,23.6225 C22.8975625,23.696875 23.483375,23.80625 23.9624375,23.9375 L24.67075,23.9375 C23.829875,24.92625 22.6849375,25.6525 21.372875,25.954375 L21.372875,25.954375 Z M20,26.125 C19.412875,26.125 18.896625,25.105625 18.579,23.5525 C19.034,23.521875 19.503875,23.5 20,23.5 C20.4956875,23.5 20.966,23.521875 21.421,23.5525 C21.1029375,25.105625 20.5866875,26.125 20,26.125 L20,26.125 Z M15.3288125,23.9375 L16.0375625,23.9375 C16.5161875,23.80625 17.1024375,23.696875 17.759125,23.6225 C17.976125,24.5675 18.2723125,25.3725 18.6266875,25.954375 C17.3150625,25.6525 16.170125,24.92625 15.3288125,23.9375 L15.3288125,23.9375 Z M15.0146875,23.5175 C14.3068125,22.52 13.875,21.316875 13.875,20 L17.375,20 C17.375,20.9975 17.4559375,21.9425 17.59725,22.8 C16.56125,22.953125 15.6744375,23.2025 15.0146875,23.5175 L15.0146875,23.5175 Z M15.030875,16.45625 C15.6796875,16.78 16.5634375,17.03375 17.60075,17.195625 C17.501,17.799375 17.428375,18.4425 17.3964375,19.125 L13.951125,19.125 C14.0933125,18.13625 14.477,17.230625 15.030875,16.45625 L15.030875,16.45625 Z M18.6266875,14.04125 C18.27275,14.623125 17.977,15.42375 17.760875,16.373125 C17.1265,16.294375 16.558625,16.189375 16.0944375,16.0625 L15.34325,16.0625 C16.180625,15.069375 17.3168125,14.343125 18.6266875,14.04125 L18.6266875,14.04125 Z M20,13.875 C20.585375,13.875 21.0959375,14.894375 21.4118125,16.443125 C20.959875,16.478125 20.492625,16.5 20,16.5 C19.5069375,16.5 19.0396875,16.478125 18.58775,16.443125 C18.903625,14.894375 19.4141875,13.875 20,13.875 L20,13.875 Z M18.2749375,19.125 C18.3020625,18.473125 18.362,17.865 18.441625,17.29625 C18.9408125,17.344375 19.4596875,17.375 20,17.375 C20.5403125,17.375 21.0591875,17.344375 21.5579375,17.29625 C21.638,17.865 21.6979375,18.473125 21.724625,19.125 L18.2749375,19.125 L18.2749375,19.125 Z M21.75,20 C21.75,20.97125 21.6786875,21.88125 21.5631875,22.699375 C21.06225,22.65125 20.5420625,22.625 20,22.625 C19.4579375,22.625 18.9373125,22.65125 18.436375,22.699375 C18.320875,21.88125 18.25,20.97125 18.25,20 L21.75,20 L21.75,20 Z M24.6563125,16.0625 L23.905125,16.0625 C23.441375,16.189375 22.8730625,16.294375 22.2386875,16.373125 C22.0225625,15.42375 21.7268125,14.623125 21.372875,14.04125 C22.68275,14.343125 23.8189375,15.069375 24.6563125,16.0625 L24.6563125,16.0625 Z M24.9686875,16.45625 C25.5225625,17.230625 25.90625,18.13625 26.048875,19.125 L22.603125,19.125 C22.5711875,18.4425 22.499,17.799375 22.39925,17.195625 C23.4365625,17.03375 24.3203125,16.78 24.9686875,16.45625 L24.9686875,16.45625 Z M20,13 C16.1338125,13 13,16.1325 13,20 C13,23.863125 16.1338125,27 20,27 C23.86575,27 27,23.863125 27,20 C27,16.1325 23.86575,13 20,13 L20,13 Z\\"></path></g></g></g></g></svg>"
+    data-icon={
+      <svg
+        className="auth0-lock-icon auth0-lock-icon-box auth0-lock-icon-location"
+        focusable="false"
+        height="14px"
+        version="1.1"
+        viewBox="0 0 14 14"
+        width="14px"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+      >
+        <g
+          fill="none"
+          fillRule="evenodd"
+          stroke="none"
+          strokeWidth="1"
+        >
+          <g
+            fill="#919191"
+            id="Lock"
+            transform="translate(-201.000000, -3519.000000)"
+          >
+            <g
+              id="SMS"
+              transform="translate(153.000000, 3207.000000)"
+            >
+              <g
+                transform="translate(35.000000, 299.000000)"
+              >
+                <path
+                  d="M22.4023125,22.8 C22.543625,21.9425 22.625,20.9975 22.625,20 L26.125,20 C26.125,21.316875 25.69275,22.52 24.9853125,23.5175 C24.3255625,23.2025 23.4383125,22.953125 22.4023125,22.8 L22.4023125,22.8 Z M21.372875,25.954375 C21.72725,25.3725 22.0234375,24.5675 22.2404375,23.6225 C22.8975625,23.696875 23.483375,23.80625 23.9624375,23.9375 L24.67075,23.9375 C23.829875,24.92625 22.6849375,25.6525 21.372875,25.954375 L21.372875,25.954375 Z M20,26.125 C19.412875,26.125 18.896625,25.105625 18.579,23.5525 C19.034,23.521875 19.503875,23.5 20,23.5 C20.4956875,23.5 20.966,23.521875 21.421,23.5525 C21.1029375,25.105625 20.5866875,26.125 20,26.125 L20,26.125 Z M15.3288125,23.9375 L16.0375625,23.9375 C16.5161875,23.80625 17.1024375,23.696875 17.759125,23.6225 C17.976125,24.5675 18.2723125,25.3725 18.6266875,25.954375 C17.3150625,25.6525 16.170125,24.92625 15.3288125,23.9375 L15.3288125,23.9375 Z M15.0146875,23.5175 C14.3068125,22.52 13.875,21.316875 13.875,20 L17.375,20 C17.375,20.9975 17.4559375,21.9425 17.59725,22.8 C16.56125,22.953125 15.6744375,23.2025 15.0146875,23.5175 L15.0146875,23.5175 Z M15.030875,16.45625 C15.6796875,16.78 16.5634375,17.03375 17.60075,17.195625 C17.501,17.799375 17.428375,18.4425 17.3964375,19.125 L13.951125,19.125 C14.0933125,18.13625 14.477,17.230625 15.030875,16.45625 L15.030875,16.45625 Z M18.6266875,14.04125 C18.27275,14.623125 17.977,15.42375 17.760875,16.373125 C17.1265,16.294375 16.558625,16.189375 16.0944375,16.0625 L15.34325,16.0625 C16.180625,15.069375 17.3168125,14.343125 18.6266875,14.04125 L18.6266875,14.04125 Z M20,13.875 C20.585375,13.875 21.0959375,14.894375 21.4118125,16.443125 C20.959875,16.478125 20.492625,16.5 20,16.5 C19.5069375,16.5 19.0396875,16.478125 18.58775,16.443125 C18.903625,14.894375 19.4141875,13.875 20,13.875 L20,13.875 Z M18.2749375,19.125 C18.3020625,18.473125 18.362,17.865 18.441625,17.29625 C18.9408125,17.344375 19.4596875,17.375 20,17.375 C20.5403125,17.375 21.0591875,17.344375 21.5579375,17.29625 C21.638,17.865 21.6979375,18.473125 21.724625,19.125 L18.2749375,19.125 L18.2749375,19.125 Z M21.75,20 C21.75,20.97125 21.6786875,21.88125 21.5631875,22.699375 C21.06225,22.65125 20.5420625,22.625 20,22.625 C19.4579375,22.625 18.9373125,22.65125 18.436375,22.699375 C18.320875,21.88125 18.25,20.97125 18.25,20 L21.75,20 L21.75,20 Z M24.6563125,16.0625 L23.905125,16.0625 C23.441375,16.189375 22.8730625,16.294375 22.2386875,16.373125 C22.0225625,15.42375 21.7268125,14.623125 21.372875,14.04125 C22.68275,14.343125 23.8189375,15.069375 24.6563125,16.0625 L24.6563125,16.0625 Z M24.9686875,16.45625 C25.5225625,17.230625 25.90625,18.13625 26.048875,19.125 L22.603125,19.125 C22.5711875,18.4425 22.499,17.799375 22.39925,17.195625 C23.4365625,17.03375 24.3203125,16.78 24.9686875,16.45625 L24.9686875,16.45625 Z M20,13 C16.1338125,13 13,16.1325 13,20 C13,23.863125 16.1338125,27 20,27 C23.86575,27 27,23.863125 27,20 C27,16.1325 23.86575,13 20,13 L20,13 Z"
+                  id="Fill-349-Copy"
+                />
+              </g>
+            </g>
+          </g>
+        </g>
+      </svg>
+    }
     data-isValid={false}
     data-label="humanLocation"
     data-name="location"
@@ -46,7 +84,45 @@ exports[`PhoneNumberPane renders correctly 1`] = `
 <div>
   <div
     data-__type="select_input"
-    data-icon="<svg focusable=\\"false\\" width=\\"14px\\" height=\\"14px\\" viewBox=\\"0 0 14 14\\" version=\\"1.1\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" xmlns:sketch=\\"http://www.bohemiancoding.com/sketch/ns\\" class=\\"auth0-lock-icon auth0-lock-icon-box auth0-lock-icon-location\\"><g stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" sketch:type=\\"MSPage\\"><g id=\\"Lock\\" transform=\\"translate(-201.000000, -3519.000000)\\" fill=\\"#919191\\"><g id=\\"SMS\\" transform=\\"translate(153.000000, 3207.000000)\\"><g transform=\\"translate(35.000000, 299.000000)\\"><path id=\\"Fill-349-Copy\\" d=\\"M22.4023125,22.8 C22.543625,21.9425 22.625,20.9975 22.625,20 L26.125,20 C26.125,21.316875 25.69275,22.52 24.9853125,23.5175 C24.3255625,23.2025 23.4383125,22.953125 22.4023125,22.8 L22.4023125,22.8 Z M21.372875,25.954375 C21.72725,25.3725 22.0234375,24.5675 22.2404375,23.6225 C22.8975625,23.696875 23.483375,23.80625 23.9624375,23.9375 L24.67075,23.9375 C23.829875,24.92625 22.6849375,25.6525 21.372875,25.954375 L21.372875,25.954375 Z M20,26.125 C19.412875,26.125 18.896625,25.105625 18.579,23.5525 C19.034,23.521875 19.503875,23.5 20,23.5 C20.4956875,23.5 20.966,23.521875 21.421,23.5525 C21.1029375,25.105625 20.5866875,26.125 20,26.125 L20,26.125 Z M15.3288125,23.9375 L16.0375625,23.9375 C16.5161875,23.80625 17.1024375,23.696875 17.759125,23.6225 C17.976125,24.5675 18.2723125,25.3725 18.6266875,25.954375 C17.3150625,25.6525 16.170125,24.92625 15.3288125,23.9375 L15.3288125,23.9375 Z M15.0146875,23.5175 C14.3068125,22.52 13.875,21.316875 13.875,20 L17.375,20 C17.375,20.9975 17.4559375,21.9425 17.59725,22.8 C16.56125,22.953125 15.6744375,23.2025 15.0146875,23.5175 L15.0146875,23.5175 Z M15.030875,16.45625 C15.6796875,16.78 16.5634375,17.03375 17.60075,17.195625 C17.501,17.799375 17.428375,18.4425 17.3964375,19.125 L13.951125,19.125 C14.0933125,18.13625 14.477,17.230625 15.030875,16.45625 L15.030875,16.45625 Z M18.6266875,14.04125 C18.27275,14.623125 17.977,15.42375 17.760875,16.373125 C17.1265,16.294375 16.558625,16.189375 16.0944375,16.0625 L15.34325,16.0625 C16.180625,15.069375 17.3168125,14.343125 18.6266875,14.04125 L18.6266875,14.04125 Z M20,13.875 C20.585375,13.875 21.0959375,14.894375 21.4118125,16.443125 C20.959875,16.478125 20.492625,16.5 20,16.5 C19.5069375,16.5 19.0396875,16.478125 18.58775,16.443125 C18.903625,14.894375 19.4141875,13.875 20,13.875 L20,13.875 Z M18.2749375,19.125 C18.3020625,18.473125 18.362,17.865 18.441625,17.29625 C18.9408125,17.344375 19.4596875,17.375 20,17.375 C20.5403125,17.375 21.0591875,17.344375 21.5579375,17.29625 C21.638,17.865 21.6979375,18.473125 21.724625,19.125 L18.2749375,19.125 L18.2749375,19.125 Z M21.75,20 C21.75,20.97125 21.6786875,21.88125 21.5631875,22.699375 C21.06225,22.65125 20.5420625,22.625 20,22.625 C19.4579375,22.625 18.9373125,22.65125 18.436375,22.699375 C18.320875,21.88125 18.25,20.97125 18.25,20 L21.75,20 L21.75,20 Z M24.6563125,16.0625 L23.905125,16.0625 C23.441375,16.189375 22.8730625,16.294375 22.2386875,16.373125 C22.0225625,15.42375 21.7268125,14.623125 21.372875,14.04125 C22.68275,14.343125 23.8189375,15.069375 24.6563125,16.0625 L24.6563125,16.0625 Z M24.9686875,16.45625 C25.5225625,17.230625 25.90625,18.13625 26.048875,19.125 L22.603125,19.125 C22.5711875,18.4425 22.499,17.799375 22.39925,17.195625 C23.4365625,17.03375 24.3203125,16.78 24.9686875,16.45625 L24.9686875,16.45625 Z M20,13 C16.1338125,13 13,16.1325 13,20 C13,23.863125 16.1338125,27 20,27 C23.86575,27 27,23.863125 27,20 C27,16.1325 23.86575,13 20,13 L20,13 Z\\"></path></g></g></g></g></svg>"
+    data-icon={
+      <svg
+        className="auth0-lock-icon auth0-lock-icon-box auth0-lock-icon-location"
+        focusable="false"
+        height="14px"
+        version="1.1"
+        viewBox="0 0 14 14"
+        width="14px"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+      >
+        <g
+          fill="none"
+          fillRule="evenodd"
+          stroke="none"
+          strokeWidth="1"
+        >
+          <g
+            fill="#919191"
+            id="Lock"
+            transform="translate(-201.000000, -3519.000000)"
+          >
+            <g
+              id="SMS"
+              transform="translate(153.000000, 3207.000000)"
+            >
+              <g
+                transform="translate(35.000000, 299.000000)"
+              >
+                <path
+                  d="M22.4023125,22.8 C22.543625,21.9425 22.625,20.9975 22.625,20 L26.125,20 C26.125,21.316875 25.69275,22.52 24.9853125,23.5175 C24.3255625,23.2025 23.4383125,22.953125 22.4023125,22.8 L22.4023125,22.8 Z M21.372875,25.954375 C21.72725,25.3725 22.0234375,24.5675 22.2404375,23.6225 C22.8975625,23.696875 23.483375,23.80625 23.9624375,23.9375 L24.67075,23.9375 C23.829875,24.92625 22.6849375,25.6525 21.372875,25.954375 L21.372875,25.954375 Z M20,26.125 C19.412875,26.125 18.896625,25.105625 18.579,23.5525 C19.034,23.521875 19.503875,23.5 20,23.5 C20.4956875,23.5 20.966,23.521875 21.421,23.5525 C21.1029375,25.105625 20.5866875,26.125 20,26.125 L20,26.125 Z M15.3288125,23.9375 L16.0375625,23.9375 C16.5161875,23.80625 17.1024375,23.696875 17.759125,23.6225 C17.976125,24.5675 18.2723125,25.3725 18.6266875,25.954375 C17.3150625,25.6525 16.170125,24.92625 15.3288125,23.9375 L15.3288125,23.9375 Z M15.0146875,23.5175 C14.3068125,22.52 13.875,21.316875 13.875,20 L17.375,20 C17.375,20.9975 17.4559375,21.9425 17.59725,22.8 C16.56125,22.953125 15.6744375,23.2025 15.0146875,23.5175 L15.0146875,23.5175 Z M15.030875,16.45625 C15.6796875,16.78 16.5634375,17.03375 17.60075,17.195625 C17.501,17.799375 17.428375,18.4425 17.3964375,19.125 L13.951125,19.125 C14.0933125,18.13625 14.477,17.230625 15.030875,16.45625 L15.030875,16.45625 Z M18.6266875,14.04125 C18.27275,14.623125 17.977,15.42375 17.760875,16.373125 C17.1265,16.294375 16.558625,16.189375 16.0944375,16.0625 L15.34325,16.0625 C16.180625,15.069375 17.3168125,14.343125 18.6266875,14.04125 L18.6266875,14.04125 Z M20,13.875 C20.585375,13.875 21.0959375,14.894375 21.4118125,16.443125 C20.959875,16.478125 20.492625,16.5 20,16.5 C19.5069375,16.5 19.0396875,16.478125 18.58775,16.443125 C18.903625,14.894375 19.4141875,13.875 20,13.875 L20,13.875 Z M18.2749375,19.125 C18.3020625,18.473125 18.362,17.865 18.441625,17.29625 C18.9408125,17.344375 19.4596875,17.375 20,17.375 C20.5403125,17.375 21.0591875,17.344375 21.5579375,17.29625 C21.638,17.865 21.6979375,18.473125 21.724625,19.125 L18.2749375,19.125 L18.2749375,19.125 Z M21.75,20 C21.75,20.97125 21.6786875,21.88125 21.5631875,22.699375 C21.06225,22.65125 20.5420625,22.625 20,22.625 C19.4579375,22.625 18.9373125,22.65125 18.436375,22.699375 C18.320875,21.88125 18.25,20.97125 18.25,20 L21.75,20 L21.75,20 Z M24.6563125,16.0625 L23.905125,16.0625 C23.441375,16.189375 22.8730625,16.294375 22.2386875,16.373125 C22.0225625,15.42375 21.7268125,14.623125 21.372875,14.04125 C22.68275,14.343125 23.8189375,15.069375 24.6563125,16.0625 L24.6563125,16.0625 Z M24.9686875,16.45625 C25.5225625,17.230625 25.90625,18.13625 26.048875,19.125 L22.603125,19.125 C22.5711875,18.4425 22.499,17.799375 22.39925,17.195625 C23.4365625,17.03375 24.3203125,16.78 24.9686875,16.45625 L24.9686875,16.45625 Z M20,13 C16.1338125,13 13,16.1325 13,20 C13,23.863125 16.1338125,27 20,27 C23.86575,27 27,23.863125 27,20 C27,16.1325 23.86575,13 20,13 L20,13 Z"
+                  id="Fill-349-Copy"
+                />
+              </g>
+            </g>
+          </g>
+        </g>
+      </svg>
+    }
     data-isValid={false}
     data-label="humanLocation"
     data-name="location"
@@ -69,7 +145,45 @@ exports[`PhoneNumberPane sets isValid as true when \`isFieldVisiblyInvalid\` is
 <div>
   <div
     data-__type="select_input"
-    data-icon="<svg focusable=\\"false\\" width=\\"14px\\" height=\\"14px\\" viewBox=\\"0 0 14 14\\" version=\\"1.1\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" xmlns:sketch=\\"http://www.bohemiancoding.com/sketch/ns\\" class=\\"auth0-lock-icon auth0-lock-icon-box auth0-lock-icon-location\\"><g stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" sketch:type=\\"MSPage\\"><g id=\\"Lock\\" transform=\\"translate(-201.000000, -3519.000000)\\" fill=\\"#919191\\"><g id=\\"SMS\\" transform=\\"translate(153.000000, 3207.000000)\\"><g transform=\\"translate(35.000000, 299.000000)\\"><path id=\\"Fill-349-Copy\\" d=\\"M22.4023125,22.8 C22.543625,21.9425 22.625,20.9975 22.625,20 L26.125,20 C26.125,21.316875 25.69275,22.52 24.9853125,23.5175 C24.3255625,23.2025 23.4383125,22.953125 22.4023125,22.8 L22.4023125,22.8 Z M21.372875,25.954375 C21.72725,25.3725 22.0234375,24.5675 22.2404375,23.6225 C22.8975625,23.696875 23.483375,23.80625 23.9624375,23.9375 L24.67075,23.9375 C23.829875,24.92625 22.6849375,25.6525 21.372875,25.954375 L21.372875,25.954375 Z M20,26.125 C19.412875,26.125 18.896625,25.105625 18.579,23.5525 C19.034,23.521875 19.503875,23.5 20,23.5 C20.4956875,23.5 20.966,23.521875 21.421,23.5525 C21.1029375,25.105625 20.5866875,26.125 20,26.125 L20,26.125 Z M15.3288125,23.9375 L16.0375625,23.9375 C16.5161875,23.80625 17.1024375,23.696875 17.759125,23.6225 C17.976125,24.5675 18.2723125,25.3725 18.6266875,25.954375 C17.3150625,25.6525 16.170125,24.92625 15.3288125,23.9375 L15.3288125,23.9375 Z M15.0146875,23.5175 C14.3068125,22.52 13.875,21.316875 13.875,20 L17.375,20 C17.375,20.9975 17.4559375,21.9425 17.59725,22.8 C16.56125,22.953125 15.6744375,23.2025 15.0146875,23.5175 L15.0146875,23.5175 Z M15.030875,16.45625 C15.6796875,16.78 16.5634375,17.03375 17.60075,17.195625 C17.501,17.799375 17.428375,18.4425 17.3964375,19.125 L13.951125,19.125 C14.0933125,18.13625 14.477,17.230625 15.030875,16.45625 L15.030875,16.45625 Z M18.6266875,14.04125 C18.27275,14.623125 17.977,15.42375 17.760875,16.373125 C17.1265,16.294375 16.558625,16.189375 16.0944375,16.0625 L15.34325,16.0625 C16.180625,15.069375 17.3168125,14.343125 18.6266875,14.04125 L18.6266875,14.04125 Z M20,13.875 C20.585375,13.875 21.0959375,14.894375 21.4118125,16.443125 C20.959875,16.478125 20.492625,16.5 20,16.5 C19.5069375,16.5 19.0396875,16.478125 18.58775,16.443125 C18.903625,14.894375 19.4141875,13.875 20,13.875 L20,13.875 Z M18.2749375,19.125 C18.3020625,18.473125 18.362,17.865 18.441625,17.29625 C18.9408125,17.344375 19.4596875,17.375 20,17.375 C20.5403125,17.375 21.0591875,17.344375 21.5579375,17.29625 C21.638,17.865 21.6979375,18.473125 21.724625,19.125 L18.2749375,19.125 L18.2749375,19.125 Z M21.75,20 C21.75,20.97125 21.6786875,21.88125 21.5631875,22.699375 C21.06225,22.65125 20.5420625,22.625 20,22.625 C19.4579375,22.625 18.9373125,22.65125 18.436375,22.699375 C18.320875,21.88125 18.25,20.97125 18.25,20 L21.75,20 L21.75,20 Z M24.6563125,16.0625 L23.905125,16.0625 C23.441375,16.189375 22.8730625,16.294375 22.2386875,16.373125 C22.0225625,15.42375 21.7268125,14.623125 21.372875,14.04125 C22.68275,14.343125 23.8189375,15.069375 24.6563125,16.0625 L24.6563125,16.0625 Z M24.9686875,16.45625 C25.5225625,17.230625 25.90625,18.13625 26.048875,19.125 L22.603125,19.125 C22.5711875,18.4425 22.499,17.799375 22.39925,17.195625 C23.4365625,17.03375 24.3203125,16.78 24.9686875,16.45625 L24.9686875,16.45625 Z M20,13 C16.1338125,13 13,16.1325 13,20 C13,23.863125 16.1338125,27 20,27 C23.86575,27 27,23.863125 27,20 C27,16.1325 23.86575,13 20,13 L20,13 Z\\"></path></g></g></g></g></svg>"
+    data-icon={
+      <svg
+        className="auth0-lock-icon auth0-lock-icon-box auth0-lock-icon-location"
+        focusable="false"
+        height="14px"
+        version="1.1"
+        viewBox="0 0 14 14"
+        width="14px"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+      >
+        <g
+          fill="none"
+          fillRule="evenodd"
+          stroke="none"
+          strokeWidth="1"
+        >
+          <g
+            fill="#919191"
+            id="Lock"
+            transform="translate(-201.000000, -3519.000000)"
+          >
+            <g
+              id="SMS"
+              transform="translate(153.000000, 3207.000000)"
+            >
+              <g
+                transform="translate(35.000000, 299.000000)"
+              >
+                <path
+                  d="M22.4023125,22.8 C22.543625,21.9425 22.625,20.9975 22.625,20 L26.125,20 C26.125,21.316875 25.69275,22.52 24.9853125,23.5175 C24.3255625,23.2025 23.4383125,22.953125 22.4023125,22.8 L22.4023125,22.8 Z M21.372875,25.954375 C21.72725,25.3725 22.0234375,24.5675 22.2404375,23.6225 C22.8975625,23.696875 23.483375,23.80625 23.9624375,23.9375 L24.67075,23.9375 C23.829875,24.92625 22.6849375,25.6525 21.372875,25.954375 L21.372875,25.954375 Z M20,26.125 C19.412875,26.125 18.896625,25.105625 18.579,23.5525 C19.034,23.521875 19.503875,23.5 20,23.5 C20.4956875,23.5 20.966,23.521875 21.421,23.5525 C21.1029375,25.105625 20.5866875,26.125 20,26.125 L20,26.125 Z M15.3288125,23.9375 L16.0375625,23.9375 C16.5161875,23.80625 17.1024375,23.696875 17.759125,23.6225 C17.976125,24.5675 18.2723125,25.3725 18.6266875,25.954375 C17.3150625,25.6525 16.170125,24.92625 15.3288125,23.9375 L15.3288125,23.9375 Z M15.0146875,23.5175 C14.3068125,22.52 13.875,21.316875 13.875,20 L17.375,20 C17.375,20.9975 17.4559375,21.9425 17.59725,22.8 C16.56125,22.953125 15.6744375,23.2025 15.0146875,23.5175 L15.0146875,23.5175 Z M15.030875,16.45625 C15.6796875,16.78 16.5634375,17.03375 17.60075,17.195625 C17.501,17.799375 17.428375,18.4425 17.3964375,19.125 L13.951125,19.125 C14.0933125,18.13625 14.477,17.230625 15.030875,16.45625 L15.030875,16.45625 Z M18.6266875,14.04125 C18.27275,14.623125 17.977,15.42375 17.760875,16.373125 C17.1265,16.294375 16.558625,16.189375 16.0944375,16.0625 L15.34325,16.0625 C16.180625,15.069375 17.3168125,14.343125 18.6266875,14.04125 L18.6266875,14.04125 Z M20,13.875 C20.585375,13.875 21.0959375,14.894375 21.4118125,16.443125 C20.959875,16.478125 20.492625,16.5 20,16.5 C19.5069375,16.5 19.0396875,16.478125 18.58775,16.443125 C18.903625,14.894375 19.4141875,13.875 20,13.875 L20,13.875 Z M18.2749375,19.125 C18.3020625,18.473125 18.362,17.865 18.441625,17.29625 C18.9408125,17.344375 19.4596875,17.375 20,17.375 C20.5403125,17.375 21.0591875,17.344375 21.5579375,17.29625 C21.638,17.865 21.6979375,18.473125 21.724625,19.125 L18.2749375,19.125 L18.2749375,19.125 Z M21.75,20 C21.75,20.97125 21.6786875,21.88125 21.5631875,22.699375 C21.06225,22.65125 20.5420625,22.625 20,22.625 C19.4579375,22.625 18.9373125,22.65125 18.436375,22.699375 C18.320875,21.88125 18.25,20.97125 18.25,20 L21.75,20 L21.75,20 Z M24.6563125,16.0625 L23.905125,16.0625 C23.441375,16.189375 22.8730625,16.294375 22.2386875,16.373125 C22.0225625,15.42375 21.7268125,14.623125 21.372875,14.04125 C22.68275,14.343125 23.8189375,15.069375 24.6563125,16.0625 L24.6563125,16.0625 Z M24.9686875,16.45625 C25.5225625,17.230625 25.90625,18.13625 26.048875,19.125 L22.603125,19.125 C22.5711875,18.4425 22.499,17.799375 22.39925,17.195625 C23.4365625,17.03375 24.3203125,16.78 24.9686875,16.45625 L24.9686875,16.45625 Z M20,13 C16.1338125,13 13,16.1325 13,20 C13,23.863125 16.1338125,27 20,27 C23.86575,27 27,23.863125 27,20 C27,16.1325 23.86575,13 20,13 L20,13 Z"
+                  id="Fill-349-Copy"
+                />
+              </g>
+            </g>
+          </g>
+        </g>
+      </svg>
+    }
     data-isValid={true}
     data-label="humanLocation"
     data-name="location"
@@ -97,7 +211,45 @@ exports[`PhoneNumberPane shows header when instructions are available 1`] = `
   </p>
   <div
     data-__type="select_input"
-    data-icon="<svg focusable=\\"false\\" width=\\"14px\\" height=\\"14px\\" viewBox=\\"0 0 14 14\\" version=\\"1.1\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" xmlns:sketch=\\"http://www.bohemiancoding.com/sketch/ns\\" class=\\"auth0-lock-icon auth0-lock-icon-box auth0-lock-icon-location\\"><g stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" sketch:type=\\"MSPage\\"><g id=\\"Lock\\" transform=\\"translate(-201.000000, -3519.000000)\\" fill=\\"#919191\\"><g id=\\"SMS\\" transform=\\"translate(153.000000, 3207.000000)\\"><g transform=\\"translate(35.000000, 299.000000)\\"><path id=\\"Fill-349-Copy\\" d=\\"M22.4023125,22.8 C22.543625,21.9425 22.625,20.9975 22.625,20 L26.125,20 C26.125,21.316875 25.69275,22.52 24.9853125,23.5175 C24.3255625,23.2025 23.4383125,22.953125 22.4023125,22.8 L22.4023125,22.8 Z M21.372875,25.954375 C21.72725,25.3725 22.0234375,24.5675 22.2404375,23.6225 C22.8975625,23.696875 23.483375,23.80625 23.9624375,23.9375 L24.67075,23.9375 C23.829875,24.92625 22.6849375,25.6525 21.372875,25.954375 L21.372875,25.954375 Z M20,26.125 C19.412875,26.125 18.896625,25.105625 18.579,23.5525 C19.034,23.521875 19.503875,23.5 20,23.5 C20.4956875,23.5 20.966,23.521875 21.421,23.5525 C21.1029375,25.105625 20.5866875,26.125 20,26.125 L20,26.125 Z M15.3288125,23.9375 L16.0375625,23.9375 C16.5161875,23.80625 17.1024375,23.696875 17.759125,23.6225 C17.976125,24.5675 18.2723125,25.3725 18.6266875,25.954375 C17.3150625,25.6525 16.170125,24.92625 15.3288125,23.9375 L15.3288125,23.9375 Z M15.0146875,23.5175 C14.3068125,22.52 13.875,21.316875 13.875,20 L17.375,20 C17.375,20.9975 17.4559375,21.9425 17.59725,22.8 C16.56125,22.953125 15.6744375,23.2025 15.0146875,23.5175 L15.0146875,23.5175 Z M15.030875,16.45625 C15.6796875,16.78 16.5634375,17.03375 17.60075,17.195625 C17.501,17.799375 17.428375,18.4425 17.3964375,19.125 L13.951125,19.125 C14.0933125,18.13625 14.477,17.230625 15.030875,16.45625 L15.030875,16.45625 Z M18.6266875,14.04125 C18.27275,14.623125 17.977,15.42375 17.760875,16.373125 C17.1265,16.294375 16.558625,16.189375 16.0944375,16.0625 L15.34325,16.0625 C16.180625,15.069375 17.3168125,14.343125 18.6266875,14.04125 L18.6266875,14.04125 Z M20,13.875 C20.585375,13.875 21.0959375,14.894375 21.4118125,16.443125 C20.959875,16.478125 20.492625,16.5 20,16.5 C19.5069375,16.5 19.0396875,16.478125 18.58775,16.443125 C18.903625,14.894375 19.4141875,13.875 20,13.875 L20,13.875 Z M18.2749375,19.125 C18.3020625,18.473125 18.362,17.865 18.441625,17.29625 C18.9408125,17.344375 19.4596875,17.375 20,17.375 C20.5403125,17.375 21.0591875,17.344375 21.5579375,17.29625 C21.638,17.865 21.6979375,18.473125 21.724625,19.125 L18.2749375,19.125 L18.2749375,19.125 Z M21.75,20 C21.75,20.97125 21.6786875,21.88125 21.5631875,22.699375 C21.06225,22.65125 20.5420625,22.625 20,22.625 C19.4579375,22.625 18.9373125,22.65125 18.436375,22.699375 C18.320875,21.88125 18.25,20.97125 18.25,20 L21.75,20 L21.75,20 Z M24.6563125,16.0625 L23.905125,16.0625 C23.441375,16.189375 22.8730625,16.294375 22.2386875,16.373125 C22.0225625,15.42375 21.7268125,14.623125 21.372875,14.04125 C22.68275,14.343125 23.8189375,15.069375 24.6563125,16.0625 L24.6563125,16.0625 Z M24.9686875,16.45625 C25.5225625,17.230625 25.90625,18.13625 26.048875,19.125 L22.603125,19.125 C22.5711875,18.4425 22.499,17.799375 22.39925,17.195625 C23.4365625,17.03375 24.3203125,16.78 24.9686875,16.45625 L24.9686875,16.45625 Z M20,13 C16.1338125,13 13,16.1325 13,20 C13,23.863125 16.1338125,27 20,27 C23.86575,27 27,23.863125 27,20 C27,16.1325 23.86575,13 20,13 L20,13 Z\\"></path></g></g></g></g></svg>"
+    data-icon={
+      <svg
+        className="auth0-lock-icon auth0-lock-icon-box auth0-lock-icon-location"
+        focusable="false"
+        height="14px"
+        version="1.1"
+        viewBox="0 0 14 14"
+        width="14px"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+      >
+        <g
+          fill="none"
+          fillRule="evenodd"
+          stroke="none"
+          strokeWidth="1"
+        >
+          <g
+            fill="#919191"
+            id="Lock"
+            transform="translate(-201.000000, -3519.000000)"
+          >
+            <g
+              id="SMS"
+              transform="translate(153.000000, 3207.000000)"
+            >
+              <g
+                transform="translate(35.000000, 299.000000)"
+              >
+                <path
+                  d="M22.4023125,22.8 C22.543625,21.9425 22.625,20.9975 22.625,20 L26.125,20 C26.125,21.316875 25.69275,22.52 24.9853125,23.5175 C24.3255625,23.2025 23.4383125,22.953125 22.4023125,22.8 L22.4023125,22.8 Z M21.372875,25.954375 C21.72725,25.3725 22.0234375,24.5675 22.2404375,23.6225 C22.8975625,23.696875 23.483375,23.80625 23.9624375,23.9375 L24.67075,23.9375 C23.829875,24.92625 22.6849375,25.6525 21.372875,25.954375 L21.372875,25.954375 Z M20,26.125 C19.412875,26.125 18.896625,25.105625 18.579,23.5525 C19.034,23.521875 19.503875,23.5 20,23.5 C20.4956875,23.5 20.966,23.521875 21.421,23.5525 C21.1029375,25.105625 20.5866875,26.125 20,26.125 L20,26.125 Z M15.3288125,23.9375 L16.0375625,23.9375 C16.5161875,23.80625 17.1024375,23.696875 17.759125,23.6225 C17.976125,24.5675 18.2723125,25.3725 18.6266875,25.954375 C17.3150625,25.6525 16.170125,24.92625 15.3288125,23.9375 L15.3288125,23.9375 Z M15.0146875,23.5175 C14.3068125,22.52 13.875,21.316875 13.875,20 L17.375,20 C17.375,20.9975 17.4559375,21.9425 17.59725,22.8 C16.56125,22.953125 15.6744375,23.2025 15.0146875,23.5175 L15.0146875,23.5175 Z M15.030875,16.45625 C15.6796875,16.78 16.5634375,17.03375 17.60075,17.195625 C17.501,17.799375 17.428375,18.4425 17.3964375,19.125 L13.951125,19.125 C14.0933125,18.13625 14.477,17.230625 15.030875,16.45625 L15.030875,16.45625 Z M18.6266875,14.04125 C18.27275,14.623125 17.977,15.42375 17.760875,16.373125 C17.1265,16.294375 16.558625,16.189375 16.0944375,16.0625 L15.34325,16.0625 C16.180625,15.069375 17.3168125,14.343125 18.6266875,14.04125 L18.6266875,14.04125 Z M20,13.875 C20.585375,13.875 21.0959375,14.894375 21.4118125,16.443125 C20.959875,16.478125 20.492625,16.5 20,16.5 C19.5069375,16.5 19.0396875,16.478125 18.58775,16.443125 C18.903625,14.894375 19.4141875,13.875 20,13.875 L20,13.875 Z M18.2749375,19.125 C18.3020625,18.473125 18.362,17.865 18.441625,17.29625 C18.9408125,17.344375 19.4596875,17.375 20,17.375 C20.5403125,17.375 21.0591875,17.344375 21.5579375,17.29625 C21.638,17.865 21.6979375,18.473125 21.724625,19.125 L18.2749375,19.125 L18.2749375,19.125 Z M21.75,20 C21.75,20.97125 21.6786875,21.88125 21.5631875,22.699375 C21.06225,22.65125 20.5420625,22.625 20,22.625 C19.4579375,22.625 18.9373125,22.65125 18.436375,22.699375 C18.320875,21.88125 18.25,20.97125 18.25,20 L21.75,20 L21.75,20 Z M24.6563125,16.0625 L23.905125,16.0625 C23.441375,16.189375 22.8730625,16.294375 22.2386875,16.373125 C22.0225625,15.42375 21.7268125,14.623125 21.372875,14.04125 C22.68275,14.343125 23.8189375,15.069375 24.6563125,16.0625 L24.6563125,16.0625 Z M24.9686875,16.45625 C25.5225625,17.230625 25.90625,18.13625 26.048875,19.125 L22.603125,19.125 C22.5711875,18.4425 22.499,17.799375 22.39925,17.195625 C23.4365625,17.03375 24.3203125,16.78 24.9686875,16.45625 L24.9686875,16.45625 Z M20,13 C16.1338125,13 13,16.1325 13,20 C13,23.863125 16.1338125,27 20,27 C23.86575,27 27,23.863125 27,20 C27,16.1325 23.86575,13 20,13 L20,13 Z"
+                  id="Fill-349-Copy"
+                />
+              </g>
+            </g>
+          </g>
+        </g>
+      </svg>
+    }
     data-isValid={false}
     data-label="humanLocation"
     data-name="location"

programming_language: Objective-C
filename: i18n.test.js
change_type: ModificationType.MODIFY
diff: @@ -49,4 +49,17 @@ describe('i18n', () => {
       expect(syncSpy).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe('when html is called', () => {
+    it('should sanitize the input and not allow for javascript to be passed through', () => {
+      const i18n = require('../i18n');
+      const strings = {
+        test: '<img src=1 href=1 onerror="javascript:alert(1)"></img>'
+      };
+      const m = Immutable.fromJS({ i18n: { strings } });
+      const html = i18n.html(m, 'test');
+      expect(html.props.dangerouslySetInnerHTML.__html).not.toMatch(/javascript:alert/);
+      expect(html.props.dangerouslySetInnerHTML.__html).toEqual('<img href="1" src="1">');
+    });
+  });
 });

programming_language: TypeScript
filename: chrome.test.jsx.snap
change_type: ModificationType.MODIFY
diff: @@ -147,13 +147,66 @@ exports[`Chrome can dislay all global messages together 1`] = `
           className="auth0-loading"
         />
       </div>
-      <span
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<svg aria-hidden=\\"true\\" focusable=\\"false\\" width=\\"43px\\" height=\\"42px\\" viewBox=\\"0 0 43 42\\" version=\\"1.1\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" xmlns:sketch=\\"http://www.bohemiancoding.com/sketch/ns\\"><g id=\\"Page-1\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" sketch:type=\\"MSPage\\"><g id=\\"Lock\\" sketch:type=\\"MSArtboardGroup\\" transform=\\"translate(-280.000000, -3592.000000)\\"><g id=\\"SMS\\" sketch:type=\\"MSLayerGroup\\" transform=\\"translate(153.000000, 3207.000000)\\"><g id=\\"Group\\" sketch:type=\\"MSShapeGroup\\"><g id=\\"Login\\" transform=\\"translate(0.000000, 369.000000)\\"><g id=\\"Btn\\"><g id=\\"Oval-302-+-Shape\\" transform=\\"translate(128.000000, 17.000000)\\"><circle id=\\"Oval-302\\" stroke=\\"#FFFFFF\\" stroke-width=\\"2\\" cx=\\"20.5\\" cy=\\"20\\" r=\\"20\\"></circle><path d=\\"M17.8,15.4 L19.2,14 L25.2,20 L19.2,26 L17.8,24.6 L22.4,20 L17.8,15.4 Z\\" id=\\"Shape\\" fill=\\"#FFFFFF\\"></path></g></g></g></g></g></g></g></svg>",
-          }
-        }
-      />
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        height="42px"
+        version="1.1"
+        viewBox="0 0 43 42"
+        width="43px"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+      >
+        <g
+          fill="none"
+          fillRule="evenodd"
+          id="Page-1"
+          stroke="none"
+          strokeWidth="1"
+        >
+          <g
+            id="Lock"
+            transform="translate(-280.000000, -3592.000000)"
+          >
+            <g
+              id="SMS"
+              transform="translate(153.000000, 3207.000000)"
+            >
+              <g
+                id="Group"
+              >
+                <g
+                  id="Login"
+                  transform="translate(0.000000, 369.000000)"
+                >
+                  <g
+                    id="Btn"
+                  >
+                    <g
+                      id="Oval-302-+-Shape"
+                      transform="translate(128.000000, 17.000000)"
+                    >
+                      <circle
+                        cx="20.5"
+                        cy="20"
+                        id="Oval-302"
+                        r="20"
+                        stroke="#FFFFFF"
+                        strokeWidth="2"
+                      />
+                      <path
+                        d="M17.8,15.4 L19.2,14 L25.2,20 L19.2,26 L17.8,24.6 L22.4,20 L17.8,15.4 Z"
+                        fill="#FFFFFF"
+                        id="Shape"
+                      />
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </svg>
     </button>
   </div>
 </div>
@@ -278,13 +331,66 @@ exports[`Chrome renders correctly when there is a global information message 1`]
           className="auth0-loading"
         />
       </div>
-      <span
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<svg aria-hidden=\\"true\\" focusable=\\"false\\" width=\\"43px\\" height=\\"42px\\" viewBox=\\"0 0 43 42\\" version=\\"1.1\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" xmlns:sketch=\\"http://www.bohemiancoding.com/sketch/ns\\"><g id=\\"Page-1\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" sketch:type=\\"MSPage\\"><g id=\\"Lock\\" sketch:type=\\"MSArtboardGroup\\" transform=\\"translate(-280.000000, -3592.000000)\\"><g id=\\"SMS\\" sketch:type=\\"MSLayerGroup\\" transform=\\"translate(153.000000, 3207.000000)\\"><g id=\\"Group\\" sketch:type=\\"MSShapeGroup\\"><g id=\\"Login\\" transform=\\"translate(0.000000, 369.000000)\\"><g id=\\"Btn\\"><g id=\\"Oval-302-+-Shape\\" transform=\\"translate(128.000000, 17.000000)\\"><circle id=\\"Oval-302\\" stroke=\\"#FFFFFF\\" stroke-width=\\"2\\" cx=\\"20.5\\" cy=\\"20\\" r=\\"20\\"></circle><path d=\\"M17.8,15.4 L19.2,14 L25.2,20 L19.2,26 L17.8,24.6 L22.4,20 L17.8,15.4 Z\\" id=\\"Shape\\" fill=\\"#FFFFFF\\"></path></g></g></g></g></g></g></g></svg>",
-          }
-        }
-      />
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        height="42px"
+        version="1.1"
+        viewBox="0 0 43 42"
+        width="43px"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+      >
+        <g
+          fill="none"
+          fillRule="evenodd"
+          id="Page-1"
+          stroke="none"
+          strokeWidth="1"
+        >
+          <g
+            id="Lock"
+            transform="translate(-280.000000, -3592.000000)"
+          >
+            <g
+              id="SMS"
+              transform="translate(153.000000, 3207.000000)"
+            >
+              <g
+                id="Group"
+              >
+                <g
+                  id="Login"
+                  transform="translate(0.000000, 369.000000)"
+                >
+                  <g
+                    id="Btn"
+                  >
+                    <g
+                      id="Oval-302-+-Shape"
+                      transform="translate(128.000000, 17.000000)"
+                    >
+                      <circle
+                        cx="20.5"
+                        cy="20"
+                        id="Oval-302"
+                        r="20"
+                        stroke="#FFFFFF"
+                        strokeWidth="2"
+                      />
+                      <path
+                        d="M17.8,15.4 L19.2,14 L25.2,20 L19.2,26 L17.8,24.6 L22.4,20 L17.8,15.4 Z"
+                        fill="#FFFFFF"
+                        id="Shape"
+                      />
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </svg>
     </button>
   </div>
 </div>
@@ -409,13 +515,66 @@ exports[`Chrome renders correctly when there is a global message 1`] = `
           className="auth0-loading"
         />
       </div>
-      <span
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<svg aria-hidden=\\"true\\" focusable=\\"false\\" width=\\"43px\\" height=\\"42px\\" viewBox=\\"0 0 43 42\\" version=\\"1.1\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" xmlns:sketch=\\"http://www.bohemiancoding.com/sketch/ns\\"><g id=\\"Page-1\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" sketch:type=\\"MSPage\\"><g id=\\"Lock\\" sketch:type=\\"MSArtboardGroup\\" transform=\\"translate(-280.000000, -3592.000000)\\"><g id=\\"SMS\\" sketch:type=\\"MSLayerGroup\\" transform=\\"translate(153.000000, 3207.000000)\\"><g id=\\"Group\\" sketch:type=\\"MSShapeGroup\\"><g id=\\"Login\\" transform=\\"translate(0.000000, 369.000000)\\"><g id=\\"Btn\\"><g id=\\"Oval-302-+-Shape\\" transform=\\"translate(128.000000, 17.000000)\\"><circle id=\\"Oval-302\\" stroke=\\"#FFFFFF\\" stroke-width=\\"2\\" cx=\\"20.5\\" cy=\\"20\\" r=\\"20\\"></circle><path d=\\"M17.8,15.4 L19.2,14 L25.2,20 L19.2,26 L17.8,24.6 L22.4,20 L17.8,15.4 Z\\" id=\\"Shape\\" fill=\\"#FFFFFF\\"></path></g></g></g></g></g></g></g></svg>",
-          }
-        }
-      />
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        height="42px"
+        version="1.1"
+        viewBox="0 0 43 42"
+        width="43px"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+      >
+        <g
+          fill="none"
+          fillRule="evenodd"
+          id="Page-1"
+          stroke="none"
+          strokeWidth="1"
+        >
+          <g
+            id="Lock"
+            transform="translate(-280.000000, -3592.000000)"
+          >
+            <g
+              id="SMS"
+              transform="translate(153.000000, 3207.000000)"
+            >
+              <g
+                id="Group"
+              >
+                <g
+                  id="Login"
+                  transform="translate(0.000000, 369.000000)"
+                >
+                  <g
+                    id="Btn"
+                  >
+                    <g
+                      id="Oval-302-+-Shape"
+                      transform="translate(128.000000, 17.000000)"
+                    >
+                      <circle
+                        cx="20.5"
+                        cy="20"
+                        id="Oval-302"
+                        r="20"
+                        stroke="#FFFFFF"
+                        strokeWidth="2"
+                      />
+                      <path
+                        d="M17.8,15.4 L19.2,14 L25.2,20 L19.2,26 L17.8,24.6 L22.4,20 L17.8,15.4 Z"
+                        fill="#FFFFFF"
+                        id="Shape"
+                      />
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </svg>
     </button>
   </div>
 </div>
@@ -540,13 +699,66 @@ exports[`Chrome renders correctly when there is a global success message 1`] = `
           className="auth0-loading"
         />
       </div>
-      <span
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<svg aria-hidden=\\"true\\" focusable=\\"false\\" width=\\"43px\\" height=\\"42px\\" viewBox=\\"0 0 43 42\\" version=\\"1.1\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" xmlns:sketch=\\"http://www.bohemiancoding.com/sketch/ns\\"><g id=\\"Page-1\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" sketch:type=\\"MSPage\\"><g id=\\"Lock\\" sketch:type=\\"MSArtboardGroup\\" transform=\\"translate(-280.000000, -3592.000000)\\"><g id=\\"SMS\\" sketch:type=\\"MSLayerGroup\\" transform=\\"translate(153.000000, 3207.000000)\\"><g id=\\"Group\\" sketch:type=\\"MSShapeGroup\\"><g id=\\"Login\\" transform=\\"translate(0.000000, 369.000000)\\"><g id=\\"Btn\\"><g id=\\"Oval-302-+-Shape\\" transform=\\"translate(128.000000, 17.000000)\\"><circle id=\\"Oval-302\\" stroke=\\"#FFFFFF\\" stroke-width=\\"2\\" cx=\\"20.5\\" cy=\\"20\\" r=\\"20\\"></circle><path d=\\"M17.8,15.4 L19.2,14 L25.2,20 L19.2,26 L17.8,24.6 L22.4,20 L17.8,15.4 Z\\" id=\\"Shape\\" fill=\\"#FFFFFF\\"></path></g></g></g></g></g></g></g></svg>",
-          }
-        }
-      />
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        height="42px"
+        version="1.1"
+        viewBox="0 0 43 42"
+        width="43px"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+      >
+        <g
+          fill="none"
+          fillRule="evenodd"
+          id="Page-1"
+          stroke="none"
+          strokeWidth="1"
+        >
+          <g
+            id="Lock"
+            transform="translate(-280.000000, -3592.000000)"
+          >
+            <g
+              id="SMS"
+              transform="translate(153.000000, 3207.000000)"
+            >
+              <g
+                id="Group"
+              >
+                <g
+                  id="Login"
+                  transform="translate(0.000000, 369.000000)"
+                >
+                  <g
+                    id="Btn"
+                  >
+                    <g
+                      id="Oval-302-+-Shape"
+                      transform="translate(128.000000, 17.000000)"
+                    >
+                      <circle
+                        cx="20.5"
+                        cy="20"
+                        id="Oval-302"
+                        r="20"
+                        stroke="#FFFFFF"
+                        strokeWidth="2"
+                      />
+                      <path
+                        d="M17.8,15.4 L19.2,14 L25.2,20 L19.2,26 L17.8,24.6 L22.4,20 L17.8,15.4 Z"
+                        fill="#FFFFFF"
+                        id="Shape"
+                      />
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </svg>
     </button>
   </div>
 </div>
@@ -656,13 +868,66 @@ exports[`Chrome renders correctly with basic props 1`] = `
           className="auth0-loading"
         />
       </div>
-      <span
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<svg aria-hidden=\\"true\\" focusable=\\"false\\" width=\\"43px\\" height=\\"42px\\" viewBox=\\"0 0 43 42\\" version=\\"1.1\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" xmlns:sketch=\\"http://www.bohemiancoding.com/sketch/ns\\"><g id=\\"Page-1\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" sketch:type=\\"MSPage\\"><g id=\\"Lock\\" sketch:type=\\"MSArtboardGroup\\" transform=\\"translate(-280.000000, -3592.000000)\\"><g id=\\"SMS\\" sketch:type=\\"MSLayerGroup\\" transform=\\"translate(153.000000, 3207.000000)\\"><g id=\\"Group\\" sketch:type=\\"MSShapeGroup\\"><g id=\\"Login\\" transform=\\"translate(0.000000, 369.000000)\\"><g id=\\"Btn\\"><g id=\\"Oval-302-+-Shape\\" transform=\\"translate(128.000000, 17.000000)\\"><circle id=\\"Oval-302\\" stroke=\\"#FFFFFF\\" stroke-width=\\"2\\" cx=\\"20.5\\" cy=\\"20\\" r=\\"20\\"></circle><path d=\\"M17.8,15.4 L19.2,14 L25.2,20 L19.2,26 L17.8,24.6 L22.4,20 L17.8,15.4 Z\\" id=\\"Shape\\" fill=\\"#FFFFFF\\"></path></g></g></g></g></g></g></g></svg>",
-          }
-        }
-      />
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        height="42px"
+        version="1.1"
+        viewBox="0 0 43 42"
+        width="43px"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+      >
+        <g
+          fill="none"
+          fillRule="evenodd"
+          id="Page-1"
+          stroke="none"
+          strokeWidth="1"
+        >
+          <g
+            id="Lock"
+            transform="translate(-280.000000, -3592.000000)"
+          >
+            <g
+              id="SMS"
+              transform="translate(153.000000, 3207.000000)"
+            >
+              <g
+                id="Group"
+              >
+                <g
+                  id="Login"
+                  transform="translate(0.000000, 369.000000)"
+                >
+                  <g
+                    id="Btn"
+                  >
+                    <g
+                      id="Oval-302-+-Shape"
+                      transform="translate(128.000000, 17.000000)"
+                    >
+                      <circle
+                        cx="20.5"
+                        cy="20"
+                        id="Oval-302"
+                        r="20"
+                        stroke="#FFFFFF"
+                        strokeWidth="2"
+                      />
+                      <path
+                        d="M17.8,15.4 L19.2,14 L25.2,20 L19.2,26 L17.8,24.6 L22.4,20 L17.8,15.4 Z"
+                        fill="#FFFFFF"
+                        id="Shape"
+                      />
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </svg>
     </button>
   </div>
 </div>

programming_language: HTML
filename: confirmation_pane.test.jsx.snap
change_type: ModificationType.MODIFY
diff: @@ -7,43 +7,79 @@ exports[`ConfirmationPane renders correctly 1`] = `
   <span
     aria-label="close"
     className="auth0-lock-close-button"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "<svg aria-hidden=\\"true\\" focusable=\\"false\\" enable-background=\\"new 0 0 128 128\\" version=\\"1.1\\" viewBox=\\"0 0 128 128\\" xml:space=\\"preserve\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\"><g><polygon fill=\\"#373737\\" points=\\"123.5429688,11.59375 116.4765625,4.5185547 64.0019531,56.9306641 11.5595703,4.4882813     4.4882813,11.5595703 56.9272461,63.9970703 4.4570313,116.4052734 11.5244141,123.4814453 63.9985352,71.0683594     116.4423828,123.5117188 123.5126953,116.4414063 71.0732422,64.0019531   \\"></polygon></g></svg>",
-      }
-    }
     id="__lock-id__-close-button"
     onClick={[Function]}
     onKeyPress={[Function]}
     role="button"
     tabIndex={0}
-  />
+  >
+    <svg
+      aria-hidden="true"
+      enableBackground="new 0 0 128 128"
+      focusable="false"
+      version="1.1"
+      viewBox="0 0 128 128"
+      xmlSpace="preserve"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <g>
+        <polygon
+          fill="#373737"
+          points="123.5429688,11.59375 116.4765625,4.5185547 64.0019531,56.9306641 11.5595703,4.4882813     4.4882813,11.5595703 56.9272461,63.9970703 4.4570313,116.4052734 11.5244141,123.4814453 63.9985352,71.0683594     116.4423828,123.5117188 123.5126953,116.4414063 71.0732422,64.0019531   "
+        />
+      </g>
+    </svg>
+  </span>
   <span
     aria-label="back"
     className="auth0-lock-back-button"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "<svg aria-hidden=\\"true\\" focusable=\\"false\\" enable-background=\\"new 0 0 24 24\\" version=\\"1.0\\" viewBox=\\"0 0 24 24\\" xml:space=\\"preserve\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\"> <polyline fill=\\"none\\" points=\\"12.5,21 3.5,12 12.5,3 \\" stroke=\\"#000000\\" stroke-miterlimit=\\"10\\" stroke-width=\\"2\\"></polyline> <line fill=\\"none\\" stroke=\\"#000000\\" stroke-miterlimit=\\"10\\" stroke-width=\\"2\\" x1=\\"22\\" x2=\\"3.5\\" y1=\\"12\\" y2=\\"12\\"></line> </svg>",
-      }
-    }
     id="__lock-id__-back-button"
     onClick={[Function]}
     onKeyPress={[Function]}
     role="button"
     tabIndex={0}
-  />
+  >
+    <svg
+      aria-hidden="true"
+      enableBackground="new 0 0 24 24"
+      focusable="false"
+      version="1.0"
+      viewBox="0 0 24 24"
+      xmlSpace="preserve"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+       
+      <polyline
+        fill="none"
+        points="12.5,21 3.5,12 12.5,3 "
+        stroke="#000000"
+        strokeMiterlimit="10"
+        strokeWidth="2"
+      />
+       
+      <line
+        fill="none"
+        stroke="#000000"
+        strokeMiterlimit="10"
+        strokeWidth="2"
+        x1="22"
+        x2="3.5"
+        y1="12"
+        y2="12"
+      />
+       
+    </svg>
+  </span>
   <div
     className="auth0-lock-confirmation-content"
   >
-    <span
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": <svg>
-            svg
-          </svg>,
-        }
-      }
-    />
+    <span>
+      <svg>
+        svg
+      </svg>
+    </span>
     <span>
       test
     </span>

programming_language: CoffeeScript
filename: email_input.test.jsx.snap
change_type: ModificationType.MODIFY
diff: @@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EmailInput renders without issue 1`] = `"<div data-__type=\\"input_wrap\\" data-invalidhint=\\"invalidHint\\" data-isvalid=\\"true\\" data-name=\\"email\\" data-icon=\\"<svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; width=&quot;14px&quot; height=&quot;13px&quot; viewBox=&quot;0 0 32 26&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; xmlns:sketch=&quot;http://www.bohemiancoding.com/sketch/ns&quot; class=&quot;auth0-lock-icon auth0-lock-icon-box&quot;><g id=&quot;Page-1&quot; stroke=&quot;none&quot; stroke-width=&quot;1&quot; fill=&quot;none&quot; fill-rule=&quot;evenodd&quot; sketch:type=&quot;MSPage&quot;><g id=&quot;32px&quot; sketch:type=&quot;MSLayerGroup&quot; transform=&quot;translate(-2155.000000, -2317.000000)&quot; fill=&quot;#373A39&quot;><g id=&quot;Group-856&quot; transform=&quot;translate(1.000000, 1.000000)&quot; sketch:type=&quot;MSShapeGroup&quot;><path id=&quot;Fill-419&quot; d=&quot;M2184,2339 C2184,2339.55 2183.55,2340 2183,2340 L2157,2340 C2156.45,2340 2156,2339.55 2156,2339 L2156,2319 C2156,2318.45 2156.45,2318 2157,2318 L2183,2318 C2183.55,2318 2184,2318.45 2184,2319 L2184,2339 L2184,2339 Z M2184,2316 L2156,2316 C2154.89,2316 2154,2316.89 2154,2318 L2154,2340 C2154,2341.1 2154.89,2342 2156,2342 L2184,2342 C2185.1,2342 2186,2341.1 2186,2340 L2186,2318 C2186,2316.89 2185.1,2316 2184,2316 L2184,2316 Z M2176,2322 L2180,2322 L2180,2326 L2176,2326 L2176,2322 Z M2174,2328 L2182,2328 L2182,2320 L2174,2320 L2174,2328 Z M2158,2332 L2172,2332 L2172,2330 L2158,2330 L2158,2332 Z M2158,2336 L2172,2336 L2172,2334 L2158,2334 L2158,2336 Z&quot;></path></g></g></g></svg>\\"><input type=\\"email\\" id=\\"1-email\\" inputmode=\\"email\\" name=\\"email\\" class=\\"auth0-lock-input\\" placeholder=\\"yours@example.com\\" autocomplete=\\"off\\" autocapitalize=\\"off\\" aria-label=\\"Email\\" aria-invalid=\\"false\\" value=\\"value\\"></div>"`;
+exports[`EmailInput renders without issue 1`] = `"<div data-__type=\\"input_wrap\\" data-invalidhint=\\"invalidHint\\" data-isvalid=\\"true\\" data-name=\\"email\\" data-icon=\\"[object Object]\\"><input type=\\"email\\" id=\\"1-email\\" inputmode=\\"email\\" name=\\"email\\" class=\\"auth0-lock-input\\" placeholder=\\"yours@example.com\\" autocomplete=\\"off\\" autocapitalize=\\"off\\" aria-label=\\"Email\\" aria-invalid=\\"false\\" value=\\"value\\"></div>"`;

programming_language: Batchfile
filename: single_sign_on_notice.jsx
change_type: ModificationType.MODIFY
diff: @@ -1,9 +1,8 @@
 import React from 'react';
-import { icon } from '../../ui/input/password_input';
+import { IconSvg } from '../../ui/input/password_input';
 
 export default ({ children }) => (
   <div className="auth0-sso-notice-container">
-    <span dangerouslySetInnerHTML={{ __html: icon }} /> {' '}
-    <span className="auth0-sso-notice">{children}</span>
+    <span>{IconSvg}</span> <span className="auth0-sso-notice">{children}</span>
   </div>
 );

programming_language: TypeScript
filename: email_sent_confirmation.jsx
change_type: ModificationType.MODIFY
diff: @@ -9,15 +9,30 @@ import * as m from './index';
 
 import * as i18n from '../../i18n'; // TODO: can't we get this from pops?
 
-const retrySvg =
-  '<svg focusable="false" height="32px" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="M27.877,19.662c0.385-1.23,0.607-2.531,0.607-3.884c0-7.222-5.83-13.101-13.029-13.194v4.238    c4.863,0.093,8.793,4.071,8.793,8.956c0,0.678-0.088,1.332-0.232,1.966l-3.963-1.966l2.76,8.199l8.197-2.762L27.877,19.662z"></path> <path d="M7.752,16.222c0-0.678,0.088-1.332,0.232-1.967l3.963,1.967l-2.76-8.199L0.99,10.785l3.133,1.553    c-0.384,1.23-0.607,2.531-0.607,3.885c0,7.223,5.83,13.1,13.03,13.194v-4.238C11.682,25.086,7.752,21.107,7.752,16.222z"></path> </svg>';
+const RetrySvgIcon = (
+  <svg
+    focusable="false"
+    height="32px"
+    style={{ enableBackground: 'new 0 0 32 32' }}
+    version="1.1"
+    viewBox="0 0 32 32"
+    width="32px"
+    xmlSpace="preserve"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    {' '}
+    <path d="M27.877,19.662c0.385-1.23,0.607-2.531,0.607-3.884c0-7.222-5.83-13.101-13.029-13.194v4.238    c4.863,0.093,8.793,4.071,8.793,8.956c0,0.678-0.088,1.332-0.232,1.966l-3.963-1.966l2.76,8.199l8.197-2.762L27.877,19.662z"></path>
+    <path d="M7.752,16.222c0-0.678,0.088-1.332,0.232-1.967l3.963,1.967l-2.76-8.199L0.99,10.785l3.133,1.553    c-0.384,1.23-0.607,2.531-0.607,3.885c0,7.223,5.83,13.1,13.03,13.194v-4.238C11.682,25.086,7.752,21.107,7.752,16.222z"></path>
+  </svg>
+);
 
 class ResendLink extends React.Component {
   render() {
     const { label, onClick } = this.props;
     return (
       <a className="auth0-lock-resend-link" href="#" onClick={onClick}>
-        {label} <span dangerouslySetInnerHTML={{ __html: retrySvg }} />
+        {label} <span>{RetrySvgIcon}</span>
       </a>
     );
   }

programming_language: JavaScript
filename: phone_number_pane.jsx
change_type: ModificationType.MODIFY
diff: @@ -11,8 +11,31 @@ import * as l from '../../core/index';
 import { swap, updateEntity } from '../../store/index';
 import { humanLocation, setPhoneNumber } from '../phone_number';
 
-export const icon =
-  '<svg focusable="false" width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" class="auth0-lock-icon auth0-lock-icon-box auth0-lock-icon-location"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"><g id="Lock" transform="translate(-201.000000, -3519.000000)" fill="#919191"><g id="SMS" transform="translate(153.000000, 3207.000000)"><g transform="translate(35.000000, 299.000000)"><path id="Fill-349-Copy" d="M22.4023125,22.8 C22.543625,21.9425 22.625,20.9975 22.625,20 L26.125,20 C26.125,21.316875 25.69275,22.52 24.9853125,23.5175 C24.3255625,23.2025 23.4383125,22.953125 22.4023125,22.8 L22.4023125,22.8 Z M21.372875,25.954375 C21.72725,25.3725 22.0234375,24.5675 22.2404375,23.6225 C22.8975625,23.696875 23.483375,23.80625 23.9624375,23.9375 L24.67075,23.9375 C23.829875,24.92625 22.6849375,25.6525 21.372875,25.954375 L21.372875,25.954375 Z M20,26.125 C19.412875,26.125 18.896625,25.105625 18.579,23.5525 C19.034,23.521875 19.503875,23.5 20,23.5 C20.4956875,23.5 20.966,23.521875 21.421,23.5525 C21.1029375,25.105625 20.5866875,26.125 20,26.125 L20,26.125 Z M15.3288125,23.9375 L16.0375625,23.9375 C16.5161875,23.80625 17.1024375,23.696875 17.759125,23.6225 C17.976125,24.5675 18.2723125,25.3725 18.6266875,25.954375 C17.3150625,25.6525 16.170125,24.92625 15.3288125,23.9375 L15.3288125,23.9375 Z M15.0146875,23.5175 C14.3068125,22.52 13.875,21.316875 13.875,20 L17.375,20 C17.375,20.9975 17.4559375,21.9425 17.59725,22.8 C16.56125,22.953125 15.6744375,23.2025 15.0146875,23.5175 L15.0146875,23.5175 Z M15.030875,16.45625 C15.6796875,16.78 16.5634375,17.03375 17.60075,17.195625 C17.501,17.799375 17.428375,18.4425 17.3964375,19.125 L13.951125,19.125 C14.0933125,18.13625 14.477,17.230625 15.030875,16.45625 L15.030875,16.45625 Z M18.6266875,14.04125 C18.27275,14.623125 17.977,15.42375 17.760875,16.373125 C17.1265,16.294375 16.558625,16.189375 16.0944375,16.0625 L15.34325,16.0625 C16.180625,15.069375 17.3168125,14.343125 18.6266875,14.04125 L18.6266875,14.04125 Z M20,13.875 C20.585375,13.875 21.0959375,14.894375 21.4118125,16.443125 C20.959875,16.478125 20.492625,16.5 20,16.5 C19.5069375,16.5 19.0396875,16.478125 18.58775,16.443125 C18.903625,14.894375 19.4141875,13.875 20,13.875 L20,13.875 Z M18.2749375,19.125 C18.3020625,18.473125 18.362,17.865 18.441625,17.29625 C18.9408125,17.344375 19.4596875,17.375 20,17.375 C20.5403125,17.375 21.0591875,17.344375 21.5579375,17.29625 C21.638,17.865 21.6979375,18.473125 21.724625,19.125 L18.2749375,19.125 L18.2749375,19.125 Z M21.75,20 C21.75,20.97125 21.6786875,21.88125 21.5631875,22.699375 C21.06225,22.65125 20.5420625,22.625 20,22.625 C19.4579375,22.625 18.9373125,22.65125 18.436375,22.699375 C18.320875,21.88125 18.25,20.97125 18.25,20 L21.75,20 L21.75,20 Z M24.6563125,16.0625 L23.905125,16.0625 C23.441375,16.189375 22.8730625,16.294375 22.2386875,16.373125 C22.0225625,15.42375 21.7268125,14.623125 21.372875,14.04125 C22.68275,14.343125 23.8189375,15.069375 24.6563125,16.0625 L24.6563125,16.0625 Z M24.9686875,16.45625 C25.5225625,17.230625 25.90625,18.13625 26.048875,19.125 L22.603125,19.125 C22.5711875,18.4425 22.499,17.799375 22.39925,17.195625 C23.4365625,17.03375 24.3203125,16.78 24.9686875,16.45625 L24.9686875,16.45625 Z M20,13 C16.1338125,13 13,16.1325 13,20 C13,23.863125 16.1338125,27 20,27 C23.86575,27 27,23.863125 27,20 C27,16.1325 23.86575,13 20,13 L20,13 Z"></path></g></g></g></g></svg>';
+export const IconSvg = (
+  <svg
+    focusable="false"
+    width="14px"
+    height="14px"
+    viewBox="0 0 14 14"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    className="auth0-lock-icon auth0-lock-icon-box auth0-lock-icon-location"
+  >
+    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g id="Lock" transform="translate(-201.000000, -3519.000000)" fill="#919191">
+        <g id="SMS" transform="translate(153.000000, 3207.000000)">
+          <g transform="translate(35.000000, 299.000000)">
+            <path
+              id="Fill-349-Copy"
+              d="M22.4023125,22.8 C22.543625,21.9425 22.625,20.9975 22.625,20 L26.125,20 C26.125,21.316875 25.69275,22.52 24.9853125,23.5175 C24.3255625,23.2025 23.4383125,22.953125 22.4023125,22.8 L22.4023125,22.8 Z M21.372875,25.954375 C21.72725,25.3725 22.0234375,24.5675 22.2404375,23.6225 C22.8975625,23.696875 23.483375,23.80625 23.9624375,23.9375 L24.67075,23.9375 C23.829875,24.92625 22.6849375,25.6525 21.372875,25.954375 L21.372875,25.954375 Z M20,26.125 C19.412875,26.125 18.896625,25.105625 18.579,23.5525 C19.034,23.521875 19.503875,23.5 20,23.5 C20.4956875,23.5 20.966,23.521875 21.421,23.5525 C21.1029375,25.105625 20.5866875,26.125 20,26.125 L20,26.125 Z M15.3288125,23.9375 L16.0375625,23.9375 C16.5161875,23.80625 17.1024375,23.696875 17.759125,23.6225 C17.976125,24.5675 18.2723125,25.3725 18.6266875,25.954375 C17.3150625,25.6525 16.170125,24.92625 15.3288125,23.9375 L15.3288125,23.9375 Z M15.0146875,23.5175 C14.3068125,22.52 13.875,21.316875 13.875,20 L17.375,20 C17.375,20.9975 17.4559375,21.9425 17.59725,22.8 C16.56125,22.953125 15.6744375,23.2025 15.0146875,23.5175 L15.0146875,23.5175 Z M15.030875,16.45625 C15.6796875,16.78 16.5634375,17.03375 17.60075,17.195625 C17.501,17.799375 17.428375,18.4425 17.3964375,19.125 L13.951125,19.125 C14.0933125,18.13625 14.477,17.230625 15.030875,16.45625 L15.030875,16.45625 Z M18.6266875,14.04125 C18.27275,14.623125 17.977,15.42375 17.760875,16.373125 C17.1265,16.294375 16.558625,16.189375 16.0944375,16.0625 L15.34325,16.0625 C16.180625,15.069375 17.3168125,14.343125 18.6266875,14.04125 L18.6266875,14.04125 Z M20,13.875 C20.585375,13.875 21.0959375,14.894375 21.4118125,16.443125 C20.959875,16.478125 20.492625,16.5 20,16.5 C19.5069375,16.5 19.0396875,16.478125 18.58775,16.443125 C18.903625,14.894375 19.4141875,13.875 20,13.875 L20,13.875 Z M18.2749375,19.125 C18.3020625,18.473125 18.362,17.865 18.441625,17.29625 C18.9408125,17.344375 19.4596875,17.375 20,17.375 C20.5403125,17.375 21.0591875,17.344375 21.5579375,17.29625 C21.638,17.865 21.6979375,18.473125 21.724625,19.125 L18.2749375,19.125 L18.2749375,19.125 Z M21.75,20 C21.75,20.97125 21.6786875,21.88125 21.5631875,22.699375 C21.06225,22.65125 20.5420625,22.625 20,22.625 C19.4579375,22.625 18.9373125,22.65125 18.436375,22.699375 C18.320875,21.88125 18.25,20.97125 18.25,20 L21.75,20 L21.75,20 Z M24.6563125,16.0625 L23.905125,16.0625 C23.441375,16.189375 22.8730625,16.294375 22.2386875,16.373125 C22.0225625,15.42375 21.7268125,14.623125 21.372875,14.04125 C22.68275,14.343125 23.8189375,15.069375 24.6563125,16.0625 L24.6563125,16.0625 Z M24.9686875,16.45625 C25.5225625,17.230625 25.90625,18.13625 26.048875,19.125 L22.603125,19.125 C22.5711875,18.4425 22.499,17.799375 22.39925,17.195625 C23.4365625,17.03375 24.3203125,16.78 24.9686875,16.45625 L24.9686875,16.45625 Z M20,13 C16.1338125,13 13,16.1325 13,20 C13,23.863125 16.1338125,27 20,27 C23.86575,27 27,23.863125 27,20 C27,16.1325 23.86575,13 20,13 L20,13 Z"
+            ></path>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
 
 export default class PhoneNumberPane extends React.Component {
   handlePhoneNumberChange(e) {
@@ -28,12 +51,12 @@ export default class PhoneNumberPane extends React.Component {
       <div>
         {header}
         <SelectInput
-          icon={icon}
+          icon={IconSvg}
           isValid={!c.isFieldVisiblyInvalid(lock, 'location')}
           name="location"
           placeholder=""
           label={humanLocation(lock)}
-          onClick={() => startOptionSelection(l.id(lock), 'location', '', icon)}
+          onClick={() => startOptionSelection(l.id(lock), 'location', '', <IconSvg />)}
         />
         <PhoneNumberInput
           value={c.phoneNumber(lock)}

programming_language: JavaScript
filename: i18n.js
change_type: ModificationType.MODIFY
diff: @@ -1,6 +1,7 @@
 import React from 'react';
 import Immutable, { Map } from 'immutable';
 import { format } from 'util';
+import { sanitize } from 'dompurify';
 import sync from './sync';
 import * as l from './core/index';
 import { dataFns } from './utils/data_utils';
@@ -14,8 +15,11 @@ export function str(m, keyPath, ...args) {
 
 export function html(m, keyPath, ...args) {
   const html = str(m, keyPath, ...args);
-
-  return html ? React.createElement('span', { dangerouslySetInnerHTML: { __html: html } }) : null;
+  // dangerouslySetInnerHTML input is sanitized using dompurify
+  // eslint-disable-next-line react/no-danger
+  return html
+    ? React.createElement('span', { dangerouslySetInnerHTML: { __html: sanitize(html) } })
+    : null;
 }
 
 export function group(m, keyPath) {

programming_language: TypeScript
filename: button.jsx
change_type: ModificationType.MODIFY
diff: @@ -1,12 +1,56 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const svgs = {
-  back:
-    '<svg aria-hidden="true" focusable="false" enable-background="new 0 0 24 24" version="1.0" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <polyline fill="none" points="12.5,21 3.5,12 12.5,3 " stroke="#000000" stroke-miterlimit="10" stroke-width="2"></polyline> <line fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2" x1="22" x2="3.5" y1="12" y2="12"></line> </svg>',
-  close:
-    '<svg aria-hidden="true" focusable="false" enable-background="new 0 0 128 128" version="1.1" viewBox="0 0 128 128" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><polygon fill="#373737" points="123.5429688,11.59375 116.4765625,4.5185547 64.0019531,56.9306641 11.5595703,4.4882813     4.4882813,11.5595703 56.9272461,63.9970703 4.4570313,116.4052734 11.5244141,123.4814453 63.9985352,71.0683594     116.4423828,123.5117188 123.5126953,116.4414063 71.0732422,64.0019531   "></polygon></g></svg>'
-};
+const SvgBackIcon = () => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    enableBackground="new 0 0 24 24"
+    version="1.0"
+    viewBox="0 0 24 24"
+    xmlSpace="preserve"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    {' '}
+    <polyline
+      fill="none"
+      points="12.5,21 3.5,12 12.5,3 "
+      stroke="#000000"
+      strokeMiterlimit="10"
+      strokeWidth="2"
+    ></polyline>{' '}
+    <line
+      fill="none"
+      stroke="#000000"
+      strokeMiterlimit="10"
+      strokeWidth="2"
+      x1="22"
+      x2="3.5"
+      y1="12"
+      y2="12"
+    ></line>{' '}
+  </svg>
+);
+const SvgCloseIcon = () => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    enableBackground="new 0 0 128 128"
+    version="1.1"
+    viewBox="0 0 128 128"
+    xmlSpace="preserve"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <g>
+      <polygon
+        fill="#373737"
+        points="123.5429688,11.59375 116.4765625,4.5185547 64.0019531,56.9306641 11.5595703,4.4882813     4.4882813,11.5595703 56.9272461,63.9970703 4.4570313,116.4052734 11.5244141,123.4814453 63.9985352,71.0683594     116.4423828,123.5117188 123.5126953,116.4414063 71.0732422,64.0019531   "
+      ></polygon>
+    </g>
+  </svg>
+);
 
 const IconButton = ({ lockId, name, onClick, svg }) => (
   <span
@@ -14,7 +58,6 @@ const IconButton = ({ lockId, name, onClick, svg }) => (
     role="button"
     tabIndex={0}
     className={`auth0-lock-${name}-button`}
-    dangerouslySetInnerHTML={{ __html: svg }}
     onClick={e => {
       e.preventDefault();
       onClick();
@@ -26,30 +69,19 @@ const IconButton = ({ lockId, name, onClick, svg }) => (
       }
     }}
     aria-label={name}
-  />
+  >
+    {svg}
+  </span>
 );
 
 IconButton.propTypes = {
   name: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
-  svg: PropTypes.string.isRequired
+  svg: PropTypes.element.isRequired
 };
 
-// const createButton = name => {
-//   const f = ({onClick}) => (
-//     <IconButton name={name} svg={svgs[name]} onClick={onClick} />
-//   );
-//   f.displayName = `IconButton (${name})`;
-//   f.propTypes = { onClick: React.PropTypes.func.isRequired };
-//
-//   return f;
-// };
-//
-// export const CloseButton = createButton("close");
-// export const BackButton = createButton("back");
-
 export const CloseButton = ({ lockId, onClick }) => (
-  <IconButton lockId={lockId} name="close" svg={svgs['close']} onClick={onClick} />
+  <IconButton lockId={lockId} name="close" onClick={onClick} svg={<SvgCloseIcon />} />
 );
 
 CloseButton.propTypes = {
@@ -57,7 +89,7 @@ CloseButton.propTypes = {
 };
 
 export const BackButton = ({ lockId, onClick }) => (
-  <IconButton lockId={lockId} name="back" svg={svgs['back']} onClick={onClick} />
+  <IconButton lockId={lockId} name="back" onClick={onClick} svg={<SvgBackIcon />} />
 );
 
 BackButton.propTypes = {

programming_language: JavaScript
filename: chrome.jsx
change_type: ModificationType.MODIFY
diff: @@ -1,16 +1,74 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { sanitize } from 'dompurify';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import MultisizeSlide from './multisize_slide';
 import GlobalMessage from './global_message';
 import * as l from '../../core/index';
 import Header from './header';
 
-const submitSvg =
-  '<svg aria-hidden="true" focusable="false" width="43px" height="42px" viewBox="0 0 43 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"><g id="Lock" sketch:type="MSArtboardGroup" transform="translate(-280.000000, -3592.000000)"><g id="SMS" sketch:type="MSLayerGroup" transform="translate(153.000000, 3207.000000)"><g id="Group" sketch:type="MSShapeGroup"><g id="Login" transform="translate(0.000000, 369.000000)"><g id="Btn"><g id="Oval-302-+-Shape" transform="translate(128.000000, 17.000000)"><circle id="Oval-302" stroke="#FFFFFF" stroke-width="2" cx="20.5" cy="20" r="20"></circle><path d="M17.8,15.4 L19.2,14 L25.2,20 L19.2,26 L17.8,24.6 L22.4,20 L17.8,15.4 Z" id="Shape" fill="#FFFFFF"></path></g></g></g></g></g></g></g></svg>';
-const submitText =
-  '<svg aria-hidden="true" focusable="false" class="icon-text" width="8px" height="12px" viewBox="0 0 8 12" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Web/Submit/Active" transform="translate(-148.000000, -32.000000)" fill="#FFFFFF"><polygon id="Shape" points="148 33.4 149.4 32 155.4 38 149.4 44 148 42.6 152.6 38"></polygon></g></g></svg>';
+const SubmitSvg = () => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    width="43px"
+    height="42px"
+    viewBox="0 0 43 42"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g id="Lock" transform="translate(-280.000000, -3592.000000)">
+        <g id="SMS" transform="translate(153.000000, 3207.000000)">
+          <g id="Group">
+            <g id="Login" transform="translate(0.000000, 369.000000)">
+              <g id="Btn">
+                <g id="Oval-302-+-Shape" transform="translate(128.000000, 17.000000)">
+                  <circle
+                    id="Oval-302"
+                    stroke="#FFFFFF"
+                    strokeWidth="2"
+                    cx="20.5"
+                    cy="20"
+                    r="20"
+                  ></circle>
+                  <path
+                    d="M17.8,15.4 L19.2,14 L25.2,20 L19.2,26 L17.8,24.6 L22.4,20 L17.8,15.4 Z"
+                    id="Shape"
+                    fill="#FFFFFF"
+                  ></path>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+const SubmitTextSvg = () => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    className="icon-text"
+    width="8px"
+    height="12px"
+    viewBox="0 0 8 12"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="Symbols" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g id="Web/Submit/Active" transform="translate(-148.000000, -32.000000)" fill="#FFFFFF">
+        <polygon
+          id="Shape"
+          points="148 33.4 149.4 32 155.4 38 149.4 44 148 42.6 152.6 38"
+        ></polygon>
+      </g>
+    </g>
+  </svg>
+);
 
 class SubmitButton extends React.Component {
   handleSubmit() {
@@ -43,10 +101,10 @@ class SubmitButton extends React.Component {
     const content = label ? (
       <span className="auth0-label-submit">
         {label}
-        <span dangerouslySetInnerHTML={{ __html: submitText }} />
+        <SubmitTextSvg />
       </span>
     ) : (
-      <span dangerouslySetInnerHTML={{ __html: submitSvg }} />
+      <SubmitSvg />
     );
 
     return (
@@ -71,6 +129,7 @@ class SubmitButton extends React.Component {
 SubmitButton.propTypes = {
   color: PropTypes.string.isRequired,
   disabled: PropTypes.bool,
+  display: PropTypes.string,
   label: PropTypes.string,
   screenName: PropTypes.string,
   onSubmit: PropTypes.func,
@@ -224,7 +283,9 @@ export default class Chrome extends React.Component {
 
     function wrapGlobalMessage(message) {
       return typeof message === 'string'
-        ? React.createElement('span', { dangerouslySetInnerHTML: { __html: message } })
+        ? // dangerouslySetInnerHTML input is sanitized using dompurify
+          // eslint-disable-next-line react/no-danger
+          React.createElement('span', { dangerouslySetInnerHTML: { __html: sanitize(message) } })
         : message;
     }
 

programming_language: JavaScript
filename: confirmation_pane.jsx
change_type: ModificationType.MODIFY
diff: @@ -8,7 +8,7 @@ const ConfirmationPane = ({ lock, backHandler, children, closeHandler, svg }) =>
     {closeHandler && <CloseButton lockId={l.id(lock)} onClick={closeHandler} />}
     {backHandler && <BackButton lockId={l.id(lock)} onClick={backHandler} />}
     <div className="auth0-lock-confirmation-content">
-      <span dangerouslySetInnerHTML={{ __html: svg }} />
+      <span>{svg}</span>
       {children}
     </div>
   </div>
@@ -21,7 +21,7 @@ ConfirmationPane.propTypes = {
     PropTypes.element.isRequired,
     PropTypes.arrayOf(PropTypes.element).isRequired
   ]),
-  svg: PropTypes.string.isRequired
+  svg: PropTypes.element.isRequired
 };
 
 export default ConfirmationPane;

programming_language: JavaScript
filename: success_pane.jsx
change_type: ModificationType.MODIFY
diff: @@ -1,8 +1,22 @@
 import React from 'react';
 import ConfirmationPane from './confirmation_pane';
 
-const svg =
-  '<svg focusable="false" width="56px" height="56px" viewBox="0 0 52 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="checkmark"> <circle cx="26" cy="26" r="25" fill="none" class="checkmark__circle"></circle> <path fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" class="checkmark__check"></path> </svg>';
+const svg = (
+  <svg
+    focusable="false"
+    width="56px"
+    height="56px"
+    viewBox="0 0 52 52"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    className="checkmark"
+  >
+    {' '}
+    <circle cx="26" cy="26" r="25" fill="none" className="checkmark__circle"></circle>{' '}
+    <path fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" className="checkmark__check"></path>{' '}
+  </svg>
+);
 
 const SuccessPane = props => <ConfirmationPane svg={svg} {...props} />;
 

programming_language: TypeScript
filename: captcha_input.jsx
change_type: ModificationType.MODIFY
diff: @@ -1,10 +1,54 @@
 import React from 'react';
 import InputWrap from './input_wrap';
 
-const inputIconSVG =
-  '<svg class="auth0-lock-icon auth0-lock-icon-box" width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="icon/key"><path id="Shape" fill-rule="evenodd" clip-rule="evenodd" d="M16.3884 11.0145C14.4508 12.9522 11.3948 13.0447 9.32094 11.3401L7.20872 13.2642L9.60904 15.6697L8.83354 16.4466L6.39631 14.0048L4.88251 15.3832L7.39496 17.89L6.61586 18.6666L3.5 15.5587L3.53914 15.5198C3.47446 15.3363 3.51554 15.1287 3.67514 14.983L8.54211 10.5496C6.89425 8.47691 7.005 5.46384 8.92209 3.54636C10.9841 1.48455 14.3267 1.48455 16.3884 3.54636C18.4501 5.60846 18.4501 8.95239 16.3884 11.0145ZM15.6048 4.33856C13.98 2.71309 11.3454 2.71309 9.72062 4.33856C8.0958 5.9632 8.0958 8.59793 9.72062 10.2226C11.3454 11.8478 13.98 11.8478 15.6048 10.2226C17.2297 8.59793 17.2297 5.96292 15.6048 4.33856Z" fill="#888888"/></g></svg>';
+const InputIconSvg = (
+  <svg
+    className="auth0-lock-icon auth0-lock-icon-box"
+    width="21"
+    height="20"
+    viewBox="0 0 21 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="icon/key">
+      <path
+        id="Shape"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.3884 11.0145C14.4508 12.9522 11.3948 13.0447 9.32094 11.3401L7.20872 13.2642L9.60904 15.6697L8.83354 16.4466L6.39631 14.0048L4.88251 15.3832L7.39496 17.89L6.61586 18.6666L3.5 15.5587L3.53914 15.5198C3.47446 15.3363 3.51554 15.1287 3.67514 14.983L8.54211 10.5496C6.89425 8.47691 7.005 5.46384 8.92209 3.54636C10.9841 1.48455 14.3267 1.48455 16.3884 3.54636C18.4501 5.60846 18.4501 8.95239 16.3884 11.0145ZM15.6048 4.33856C13.98 2.71309 11.3454 2.71309 9.72062 4.33856C8.0958 5.9632 8.0958 8.59793 9.72062 10.2226C11.3454 11.8478 13.98 11.8478 15.6048 10.2226C17.2297 8.59793 17.2297 5.96292 15.6048 4.33856Z"
+        fill="#888888"
+      />
+    </g>
+  </svg>
+);
 
-const refreshIconSVG = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.5496 8.77262C17.007 5.01122 13.8021 2.11002 9.88989 2.11002C6.79596 2.11002 4.14611 3.93257 2.896 6.55065H7.11154C7.41852 6.55065 7.66749 6.79935 7.66749 7.10579C7.66749 7.41251 7.41879 7.66205 7.11154 7.66205H2.47938H1.30282C1.30781 7.64318 1.3092 7.62291 1.3142 7.60404C1.23426 7.56296 1.16987 7.50217 1.11824 7.42889C1.10325 7.40918 1.09048 7.39086 1.07827 7.36977C1.04746 7.3112 1.02998 7.24791 1.02193 7.17935C1.01776 7.15326 1 7.133 1 7.10552C1 7.08997 1.00722 7.0772 1.00888 7.06166V1.5582C1.00888 1.25176 1.25757 1.0025 1.56427 1.0025C1.87125 1.0025 2.11994 1.25148 2.11994 1.5582V5.61994C3.6293 2.87224 6.53311 1 9.88989 1C14.4182 1 18.1481 4.39195 18.6951 8.77235H17.5496V8.77262ZM9.88989 17.655C12.9841 17.655 15.6337 15.833 16.8841 13.2152H12.6685C12.3615 13.2152 12.1128 12.967 12.1128 12.6595C12.1128 12.3525 12.3615 12.1043 12.6685 12.1043H17.3004C17.3004 12.1041 17.3007 12.1035 17.3007 12.1032H18.4775C18.4725 12.1221 18.4709 12.1424 18.4659 12.161C18.5461 12.2021 18.6105 12.2631 18.6621 12.3367C18.6774 12.3564 18.6893 12.3744 18.7018 12.3955C18.7326 12.4541 18.7504 12.5174 18.7584 12.5859C18.7626 12.612 18.7803 12.632 18.7803 12.6598C18.7803 12.675 18.7728 12.6881 18.7717 12.7031V18.2076C18.7717 18.5144 18.523 18.7628 18.2161 18.7628C17.9091 18.7628 17.6604 18.5144 17.6604 18.2076V14.1451C16.151 16.8928 13.2469 18.765 9.89017 18.765C5.36209 18.765 1.63255 15.3739 1.08493 10.9935H2.23041C2.77331 14.7549 5.97799 17.655 9.88989 17.655Z" fill="black"/><mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="18" height="18"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.5496 8.77262C17.007 5.01122 13.8021 2.11002 9.88989 2.11002C6.79596 2.11002 4.14611 3.93257 2.896 6.55065H7.11154C7.41852 6.55065 7.66749 6.79935 7.66749 7.10579C7.66749 7.41251 7.41879 7.66205 7.11154 7.66205H2.47938H1.30282C1.30781 7.64318 1.3092 7.62291 1.3142 7.60404C1.23426 7.56296 1.16987 7.50217 1.11824 7.42889C1.10325 7.40918 1.09048 7.39086 1.07827 7.36977C1.04746 7.3112 1.02998 7.24791 1.02193 7.17935C1.01776 7.15326 1 7.133 1 7.10552C1 7.08997 1.00722 7.0772 1.00888 7.06166V1.5582C1.00888 1.25176 1.25757 1.0025 1.56427 1.0025C1.87125 1.0025 2.11994 1.25148 2.11994 1.5582V5.61994C3.6293 2.87224 6.53311 1 9.88989 1C14.4182 1 18.1481 4.39195 18.6951 8.77235H17.5496V8.77262ZM9.88989 17.655C12.9841 17.655 15.6337 15.833 16.8841 13.2152H12.6685C12.3615 13.2152 12.1128 12.967 12.1128 12.6595C12.1128 12.3525 12.3615 12.1043 12.6685 12.1043H17.3004C17.3004 12.1041 17.3007 12.1035 17.3007 12.1032H18.4775C18.4725 12.1221 18.4709 12.1424 18.4659 12.161C18.5461 12.2021 18.6105 12.2631 18.6621 12.3367C18.6774 12.3564 18.6893 12.3744 18.7018 12.3955C18.7326 12.4541 18.7504 12.5174 18.7584 12.5859C18.7626 12.612 18.7803 12.632 18.7803 12.6598C18.7803 12.675 18.7728 12.6881 18.7717 12.7031V18.2076C18.7717 18.5144 18.523 18.7628 18.2161 18.7628C17.9091 18.7628 17.6604 18.5144 17.6604 18.2076V14.1451C16.151 16.8928 13.2469 18.765 9.89017 18.765C5.36209 18.765 1.63255 15.3739 1.08493 10.9935H2.23041C2.77331 14.7549 5.97799 17.655 9.88989 17.655Z" fill="white"/></mask><g mask="url(#mask0)"></g></svg>`;
+const RefreshIconSvg = () => (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M17.5496 8.77262C17.007 5.01122 13.8021 2.11002 9.88989 2.11002C6.79596 2.11002 4.14611 3.93257 2.896 6.55065H7.11154C7.41852 6.55065 7.66749 6.79935 7.66749 7.10579C7.66749 7.41251 7.41879 7.66205 7.11154 7.66205H2.47938H1.30282C1.30781 7.64318 1.3092 7.62291 1.3142 7.60404C1.23426 7.56296 1.16987 7.50217 1.11824 7.42889C1.10325 7.40918 1.09048 7.39086 1.07827 7.36977C1.04746 7.3112 1.02998 7.24791 1.02193 7.17935C1.01776 7.15326 1 7.133 1 7.10552C1 7.08997 1.00722 7.0772 1.00888 7.06166V1.5582C1.00888 1.25176 1.25757 1.0025 1.56427 1.0025C1.87125 1.0025 2.11994 1.25148 2.11994 1.5582V5.61994C3.6293 2.87224 6.53311 1 9.88989 1C14.4182 1 18.1481 4.39195 18.6951 8.77235H17.5496V8.77262ZM9.88989 17.655C12.9841 17.655 15.6337 15.833 16.8841 13.2152H12.6685C12.3615 13.2152 12.1128 12.967 12.1128 12.6595C12.1128 12.3525 12.3615 12.1043 12.6685 12.1043H17.3004C17.3004 12.1041 17.3007 12.1035 17.3007 12.1032H18.4775C18.4725 12.1221 18.4709 12.1424 18.4659 12.161C18.5461 12.2021 18.6105 12.2631 18.6621 12.3367C18.6774 12.3564 18.6893 12.3744 18.7018 12.3955C18.7326 12.4541 18.7504 12.5174 18.7584 12.5859C18.7626 12.612 18.7803 12.632 18.7803 12.6598C18.7803 12.675 18.7728 12.6881 18.7717 12.7031V18.2076C18.7717 18.5144 18.523 18.7628 18.2161 18.7628C17.9091 18.7628 17.6604 18.5144 17.6604 18.2076V14.1451C16.151 16.8928 13.2469 18.765 9.89017 18.765C5.36209 18.765 1.63255 15.3739 1.08493 10.9935H2.23041C2.77331 14.7549 5.97799 17.655 9.88989 17.655Z"
+      fill="black"
+    />
+    <mask
+      id="mask0"
+      mask-type="alpha"
+      maskUnits="userSpaceOnUse"
+      x="1"
+      y="1"
+      width="18"
+      height="18"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.5496 8.77262C17.007 5.01122 13.8021 2.11002 9.88989 2.11002C6.79596 2.11002 4.14611 3.93257 2.896 6.55065H7.11154C7.41852 6.55065 7.66749 6.79935 7.66749 7.10579C7.66749 7.41251 7.41879 7.66205 7.11154 7.66205H2.47938H1.30282C1.30781 7.64318 1.3092 7.62291 1.3142 7.60404C1.23426 7.56296 1.16987 7.50217 1.11824 7.42889C1.10325 7.40918 1.09048 7.39086 1.07827 7.36977C1.04746 7.3112 1.02998 7.24791 1.02193 7.17935C1.01776 7.15326 1 7.133 1 7.10552C1 7.08997 1.00722 7.0772 1.00888 7.06166V1.5582C1.00888 1.25176 1.25757 1.0025 1.56427 1.0025C1.87125 1.0025 2.11994 1.25148 2.11994 1.5582V5.61994C3.6293 2.87224 6.53311 1 9.88989 1C14.4182 1 18.1481 4.39195 18.6951 8.77235H17.5496V8.77262ZM9.88989 17.655C12.9841 17.655 15.6337 15.833 16.8841 13.2152H12.6685C12.3615 13.2152 12.1128 12.967 12.1128 12.6595C12.1128 12.3525 12.3615 12.1043 12.6685 12.1043H17.3004C17.3004 12.1041 17.3007 12.1035 17.3007 12.1032H18.4775C18.4725 12.1221 18.4709 12.1424 18.4659 12.161C18.5461 12.2021 18.6105 12.2631 18.6621 12.3367C18.6774 12.3564 18.6893 12.3744 18.7018 12.3955C18.7326 12.4541 18.7504 12.5174 18.7584 12.5859C18.7626 12.612 18.7803 12.632 18.7803 12.6598C18.7803 12.675 18.7728 12.6881 18.7717 12.7031V18.2076C18.7717 18.5144 18.523 18.7628 18.2161 18.7628C17.9091 18.7628 17.6604 18.5144 17.6604 18.2076V14.1451C16.151 16.8928 13.2469 18.765 9.89017 18.765C5.36209 18.765 1.63255 15.3739 1.08493 10.9935H2.23041C2.77331 14.7549 5.97799 17.655 9.88989 17.655Z"
+        fill="white"
+      />
+    </mask>
+    <g mask="url(#mask0)"></g>
+  </svg>
+);
 
 export default class CaptchaInput extends React.Component {
   constructor(props) {
@@ -49,15 +93,16 @@ export default class CaptchaInput extends React.Component {
             type="button"
             onClick={::this.handleReload}
             className="auth0-lock-captcha-refresh"
-            dangerouslySetInnerHTML={{ __html: refreshIconSVG }}
-          ></button>
+          >
+            <RefreshIconSvg />
+          </button>
         </div>
         <InputWrap
           focused={focused}
           invalidHint=""
           isValid={isValid}
           name="captcha"
-          icon={inputIconSVG}
+          icon={InputIconSvg}
         >
           <input
             id={`${lockId}-captcha`}

programming_language: HTML
filename: checkbox_input.jsx
change_type: ModificationType.MODIFY
diff: @@ -15,6 +15,8 @@ export default class CheckboxInput extends React.Component {
             aria-label={ariaLabel || name}
           />
           {placeholderHTML ? (
+            // placeholderHTML allows raw HTML
+            // eslint-disable-next-line react/no-danger
             <span dangerouslySetInnerHTML={{ __html: placeholderHTML }} />
           ) : (
             <span>{placeholder}</span>

programming_language: JavaScript
filename: email_input.jsx
change_type: ModificationType.MODIFY
diff: @@ -1,8 +1,30 @@
 import React from 'react';
 import InputWrap from './input_wrap';
 
-const svg =
-  '<svg aria-hidden="true" focusable="false" width="14px" height="13px" viewBox="0 0 32 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" class="auth0-lock-icon auth0-lock-icon-box"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"><g id="32px" sketch:type="MSLayerGroup" transform="translate(-2155.000000, -2317.000000)" fill="#373A39"><g id="Group-856" transform="translate(1.000000, 1.000000)" sketch:type="MSShapeGroup"><path id="Fill-419" d="M2184,2339 C2184,2339.55 2183.55,2340 2183,2340 L2157,2340 C2156.45,2340 2156,2339.55 2156,2339 L2156,2319 C2156,2318.45 2156.45,2318 2157,2318 L2183,2318 C2183.55,2318 2184,2318.45 2184,2319 L2184,2339 L2184,2339 Z M2184,2316 L2156,2316 C2154.89,2316 2154,2316.89 2154,2318 L2154,2340 C2154,2341.1 2154.89,2342 2156,2342 L2184,2342 C2185.1,2342 2186,2341.1 2186,2340 L2186,2318 C2186,2316.89 2185.1,2316 2184,2316 L2184,2316 Z M2176,2322 L2180,2322 L2180,2326 L2176,2326 L2176,2322 Z M2174,2328 L2182,2328 L2182,2320 L2174,2320 L2174,2328 Z M2158,2332 L2172,2332 L2172,2330 L2158,2330 L2158,2332 Z M2158,2336 L2172,2336 L2172,2334 L2158,2334 L2158,2336 Z"></path></g></g></g></svg>';
+const SVG = (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    width="14px"
+    height="13px"
+    viewBox="0 0 32 26"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    className="auth0-lock-icon auth0-lock-icon-box"
+  >
+    <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g id="32px" transform="translate(-2155.000000, -2317.000000)" fill="#373A39">
+        <g id="Group-856" transform="translate(1.000000, 1.000000)">
+          <path
+            id="Fill-419"
+            d="M2184,2339 C2184,2339.55 2183.55,2340 2183,2340 L2157,2340 C2156.45,2340 2156,2339.55 2156,2339 L2156,2319 C2156,2318.45 2156.45,2318 2157,2318 L2183,2318 C2183.55,2318 2184,2318.45 2184,2319 L2184,2339 L2184,2339 Z M2184,2316 L2156,2316 C2154.89,2316 2154,2316.89 2154,2318 L2154,2340 C2154,2341.1 2154.89,2342 2156,2342 L2184,2342 C2185.1,2342 2186,2341.1 2186,2340 L2186,2318 C2186,2316.89 2185.1,2316 2184,2316 L2184,2316 Z M2176,2322 L2180,2322 L2180,2326 L2176,2326 L2176,2322 Z M2174,2328 L2182,2328 L2182,2320 L2174,2320 L2174,2328 Z M2158,2332 L2172,2332 L2172,2330 L2158,2330 L2158,2332 Z M2158,2336 L2172,2336 L2172,2334 L2158,2334 L2158,2336 Z"
+          ></path>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
 
 export default class EmailInput extends React.Component {
   constructor(props) {
@@ -33,7 +55,7 @@ export default class EmailInput extends React.Component {
         invalidHint={invalidHint}
         isValid={isValid}
         name="email"
-        icon={svg}
+        icon={SVG}
       >
         <input
           id={`${lockId}-email`}

programming_language: TypeScript
filename: input_wrap.jsx
change_type: ModificationType.MODIFY
diff: @@ -14,17 +14,7 @@ export default class InputWrap extends React.Component {
       wrapClassName += ' auth0-lock-focused';
     }
 
-    // NOTE: Ugly hack until we upgrade to React 15 which has better
-    // support for SVG.
-    let iconElement = null;
-
-    if (typeof icon === 'string') {
-      iconElement = <span aria-hidden="true" dangerouslySetInnerHTML={{ __html: icon }} />;
-    } else if (icon) {
-      iconElement = icon;
-    }
-
-    if (iconElement) {
+    if (icon) {
       wrapClassName += ' auth0-lock-input-wrap-with-icon';
     }
 
@@ -38,7 +28,7 @@ export default class InputWrap extends React.Component {
     return (
       <div className={blockClassName}>
         <div className={wrapClassName}>
-          {iconElement}
+          {icon}
           {this.props.children}
           {after}
         </div>
@@ -58,5 +48,5 @@ InputWrap.propTypes = {
   invalidHint: PropTypes.node,
   isValid: PropTypes.bool.isRequired,
   name: PropTypes.string.isRequired,
-  svg: PropTypes.string
+  icon: PropTypes.object
 };

programming_language: JavaScript
filename: location_input.jsx
change_type: ModificationType.MODIFY
diff: @@ -1,10 +1,62 @@
 import React from 'react';
 import InputWrap from './input_wrap';
 
-export const icon =
-  '<svg aria-hidden="true" focusable="false" width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" class="auth0-lock-icon auth0-lock-icon-box auth0-lock-icon-location"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"><g id="Lock" transform="translate(-201.000000, -3519.000000)" fill="#919191"><g id="SMS" transform="translate(153.000000, 3207.000000)"><g transform="translate(35.000000, 299.000000)"><path id="Fill-349-Copy" d="M22.4023125,22.8 C22.543625,21.9425 22.625,20.9975 22.625,20 L26.125,20 C26.125,21.316875 25.69275,22.52 24.9853125,23.5175 C24.3255625,23.2025 23.4383125,22.953125 22.4023125,22.8 L22.4023125,22.8 Z M21.372875,25.954375 C21.72725,25.3725 22.0234375,24.5675 22.2404375,23.6225 C22.8975625,23.696875 23.483375,23.80625 23.9624375,23.9375 L24.67075,23.9375 C23.829875,24.92625 22.6849375,25.6525 21.372875,25.954375 L21.372875,25.954375 Z M20,26.125 C19.412875,26.125 18.896625,25.105625 18.579,23.5525 C19.034,23.521875 19.503875,23.5 20,23.5 C20.4956875,23.5 20.966,23.521875 21.421,23.5525 C21.1029375,25.105625 20.5866875,26.125 20,26.125 L20,26.125 Z M15.3288125,23.9375 L16.0375625,23.9375 C16.5161875,23.80625 17.1024375,23.696875 17.759125,23.6225 C17.976125,24.5675 18.2723125,25.3725 18.6266875,25.954375 C17.3150625,25.6525 16.170125,24.92625 15.3288125,23.9375 L15.3288125,23.9375 Z M15.0146875,23.5175 C14.3068125,22.52 13.875,21.316875 13.875,20 L17.375,20 C17.375,20.9975 17.4559375,21.9425 17.59725,22.8 C16.56125,22.953125 15.6744375,23.2025 15.0146875,23.5175 L15.0146875,23.5175 Z M15.030875,16.45625 C15.6796875,16.78 16.5634375,17.03375 17.60075,17.195625 C17.501,17.799375 17.428375,18.4425 17.3964375,19.125 L13.951125,19.125 C14.0933125,18.13625 14.477,17.230625 15.030875,16.45625 L15.030875,16.45625 Z M18.6266875,14.04125 C18.27275,14.623125 17.977,15.42375 17.760875,16.373125 C17.1265,16.294375 16.558625,16.189375 16.0944375,16.0625 L15.34325,16.0625 C16.180625,15.069375 17.3168125,14.343125 18.6266875,14.04125 L18.6266875,14.04125 Z M20,13.875 C20.585375,13.875 21.0959375,14.894375 21.4118125,16.443125 C20.959875,16.478125 20.492625,16.5 20,16.5 C19.5069375,16.5 19.0396875,16.478125 18.58775,16.443125 C18.903625,14.894375 19.4141875,13.875 20,13.875 L20,13.875 Z M18.2749375,19.125 C18.3020625,18.473125 18.362,17.865 18.441625,17.29625 C18.9408125,17.344375 19.4596875,17.375 20,17.375 C20.5403125,17.375 21.0591875,17.344375 21.5579375,17.29625 C21.638,17.865 21.6979375,18.473125 21.724625,19.125 L18.2749375,19.125 L18.2749375,19.125 Z M21.75,20 C21.75,20.97125 21.6786875,21.88125 21.5631875,22.699375 C21.06225,22.65125 20.5420625,22.625 20,22.625 C19.4579375,22.625 18.9373125,22.65125 18.436375,22.699375 C18.320875,21.88125 18.25,20.97125 18.25,20 L21.75,20 L21.75,20 Z M24.6563125,16.0625 L23.905125,16.0625 C23.441375,16.189375 22.8730625,16.294375 22.2386875,16.373125 C22.0225625,15.42375 21.7268125,14.623125 21.372875,14.04125 C22.68275,14.343125 23.8189375,15.069375 24.6563125,16.0625 L24.6563125,16.0625 Z M24.9686875,16.45625 C25.5225625,17.230625 25.90625,18.13625 26.048875,19.125 L22.603125,19.125 C22.5711875,18.4425 22.499,17.799375 22.39925,17.195625 C23.4365625,17.03375 24.3203125,16.78 24.9686875,16.45625 L24.9686875,16.45625 Z M20,13 C16.1338125,13 13,16.1325 13,20 C13,23.863125 16.1338125,27 20,27 C23.86575,27 27,23.863125 27,20 C27,16.1325 23.86575,13 20,13 L20,13 Z"></path></g></g></g></g></svg>';
-const arrowSvg =
-  '<svg aria-hidden="true" focusable="false" width="5px" height="10px" viewBox="0 0 5 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" class="auth0-lock-icon auth0-lock-icon-box auth0-lock-icon-arrow"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"><g id="Lock" transform="translate(-396.000000, -3521.000000)" fill="#000000" opacity="0.539999962"><g id="SMS" transform="translate(153.000000, 3207.000000)"><g transform="translate(35.000000, 299.000000)"><g transform="translate(210.000000, 20.000000) rotate(-90.000000) translate(-210.000000, -20.000000) translate(198.000000, 8.000000)"><path id="Shape" d="M7,10 L12,15 L17,10 L7,10 Z"></path></g></g></g></g></g></svg>';
+export const IconSvg = (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    width="14px"
+    height="14px"
+    viewBox="0 0 14 14"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    className="auth0-lock-icon auth0-lock-icon-box auth0-lock-icon-location"
+  >
+    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g id="Lock" transform="translate(-201.000000, -3519.000000)" fill="#919191">
+        <g id="SMS" transform="translate(153.000000, 3207.000000)">
+          <g transform="translate(35.000000, 299.000000)">
+            <path
+              id="Fill-349-Copy"
+              d="M22.4023125,22.8 C22.543625,21.9425 22.625,20.9975 22.625,20 L26.125,20 C26.125,21.316875 25.69275,22.52 24.9853125,23.5175 C24.3255625,23.2025 23.4383125,22.953125 22.4023125,22.8 L22.4023125,22.8 Z M21.372875,25.954375 C21.72725,25.3725 22.0234375,24.5675 22.2404375,23.6225 C22.8975625,23.696875 23.483375,23.80625 23.9624375,23.9375 L24.67075,23.9375 C23.829875,24.92625 22.6849375,25.6525 21.372875,25.954375 L21.372875,25.954375 Z M20,26.125 C19.412875,26.125 18.896625,25.105625 18.579,23.5525 C19.034,23.521875 19.503875,23.5 20,23.5 C20.4956875,23.5 20.966,23.521875 21.421,23.5525 C21.1029375,25.105625 20.5866875,26.125 20,26.125 L20,26.125 Z M15.3288125,23.9375 L16.0375625,23.9375 C16.5161875,23.80625 17.1024375,23.696875 17.759125,23.6225 C17.976125,24.5675 18.2723125,25.3725 18.6266875,25.954375 C17.3150625,25.6525 16.170125,24.92625 15.3288125,23.9375 L15.3288125,23.9375 Z M15.0146875,23.5175 C14.3068125,22.52 13.875,21.316875 13.875,20 L17.375,20 C17.375,20.9975 17.4559375,21.9425 17.59725,22.8 C16.56125,22.953125 15.6744375,23.2025 15.0146875,23.5175 L15.0146875,23.5175 Z M15.030875,16.45625 C15.6796875,16.78 16.5634375,17.03375 17.60075,17.195625 C17.501,17.799375 17.428375,18.4425 17.3964375,19.125 L13.951125,19.125 C14.0933125,18.13625 14.477,17.230625 15.030875,16.45625 L15.030875,16.45625 Z M18.6266875,14.04125 C18.27275,14.623125 17.977,15.42375 17.760875,16.373125 C17.1265,16.294375 16.558625,16.189375 16.0944375,16.0625 L15.34325,16.0625 C16.180625,15.069375 17.3168125,14.343125 18.6266875,14.04125 L18.6266875,14.04125 Z M20,13.875 C20.585375,13.875 21.0959375,14.894375 21.4118125,16.443125 C20.959875,16.478125 20.492625,16.5 20,16.5 C19.5069375,16.5 19.0396875,16.478125 18.58775,16.443125 C18.903625,14.894375 19.4141875,13.875 20,13.875 L20,13.875 Z M18.2749375,19.125 C18.3020625,18.473125 18.362,17.865 18.441625,17.29625 C18.9408125,17.344375 19.4596875,17.375 20,17.375 C20.5403125,17.375 21.0591875,17.344375 21.5579375,17.29625 C21.638,17.865 21.6979375,18.473125 21.724625,19.125 L18.2749375,19.125 L18.2749375,19.125 Z M21.75,20 C21.75,20.97125 21.6786875,21.88125 21.5631875,22.699375 C21.06225,22.65125 20.5420625,22.625 20,22.625 C19.4579375,22.625 18.9373125,22.65125 18.436375,22.699375 C18.320875,21.88125 18.25,20.97125 18.25,20 L21.75,20 L21.75,20 Z M24.6563125,16.0625 L23.905125,16.0625 C23.441375,16.189375 22.8730625,16.294375 22.2386875,16.373125 C22.0225625,15.42375 21.7268125,14.623125 21.372875,14.04125 C22.68275,14.343125 23.8189375,15.069375 24.6563125,16.0625 L24.6563125,16.0625 Z M24.9686875,16.45625 C25.5225625,17.230625 25.90625,18.13625 26.048875,19.125 L22.603125,19.125 C22.5711875,18.4425 22.499,17.799375 22.39925,17.195625 C23.4365625,17.03375 24.3203125,16.78 24.9686875,16.45625 L24.9686875,16.45625 Z M20,13 C16.1338125,13 13,16.1325 13,20 C13,23.863125 16.1338125,27 20,27 C23.86575,27 27,23.863125 27,20 C27,16.1325 23.86575,13 20,13 L20,13 Z"
+            ></path>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+const ArrowIconSvg = () => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    width="5px"
+    height="10px"
+    viewBox="0 0 5 10"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    className="auth0-lock-icon auth0-lock-icon-box auth0-lock-icon-arrow"
+  >
+    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g
+        id="Lock"
+        transform="translate(-396.000000, -3521.000000)"
+        fill="#000000"
+        opacity="0.539999962"
+      >
+        <g id="SMS" transform="translate(153.000000, 3207.000000)">
+          <g transform="translate(35.000000, 299.000000)">
+            <g transform="translate(210.000000, 20.000000) rotate(-90.000000) translate(-210.000000, -20.000000) translate(198.000000, 8.000000)">
+              <path id="Shape" d="M7,10 L12,15 L17,10 L7,10 Z"></path>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
 
 export default class LocationInput extends React.Component {
   constructor(props) {
@@ -19,7 +71,7 @@ export default class LocationInput extends React.Component {
     const limitedValue = value.length > 23 ? `${value.substr(0, 20)}...` : value;
 
     return (
-      <InputWrap focused={focused} isValid={true} name="location" icon={icon}>
+      <InputWrap focused={focused} isValid={true} name="location" icon={IconSvg}>
         <input
           type="button"
           name="location"
@@ -31,7 +83,9 @@ export default class LocationInput extends React.Component {
           onClick={onClick}
           aria-label="Location"
         />
-        <span dangerouslySetInnerHTML={{ __html: arrowSvg }} />
+        <span>
+          <ArrowIconSvg />
+        </span>
       </InputWrap>
     );
   }

programming_language: JavaScript
filename: mfa_code_input.jsx
change_type: ModificationType.MODIFY
diff: @@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import InputWrap from './input_wrap';
-import { icon } from './password_input';
+import { IconSvg } from './password_input';
 
 export default class MFACodeInput extends React.Component {
   static propTypes = {
@@ -36,7 +36,7 @@ export default class MFACodeInput extends React.Component {
         invalidHint={invalidHint}
         isValid={isValid}
         name="mfa_code"
-        icon={icon}
+        icon={IconSvg}
       >
         <input
           id={`${lockId}-mfa_code`}

programming_language: JavaScript
filename: password_input.jsx
change_type: ModificationType.MODIFY
diff: @@ -4,8 +4,25 @@ import InputWrap from './input_wrap';
 import PasswordStrength from './password/password_strength';
 import * as l from '../../core/index';
 
-export const icon =
-  '<svg aria-hidden="true" focusable="false" width="11px" height="14px" viewBox="0 0 13 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="auth0-lock-icon auth0-lock-icon-box"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-288.000000, -1508.000000)" fill="#888888"><path d="M299,1523.998 L290,1523.998 C288.896,1523.998 288,1523.102 288,1521.999 L288,1515.999 C288,1514.895 288.896,1513.998 290,1513.998 L290,1513.998 L290,1512.499 C290,1510.015 292.015,1507.999 294.5,1507.999 C296.985,1507.999 299,1510.015 299,1512.499 L299,1513.999 C300.104,1513.999 301,1514.895 301,1515.999 L301,1521.999 C301,1523.103 300.104,1523.998 299,1523.998 L299,1523.998 Z M298,1512.499 C298,1510.566 296.433,1508.999 294.5,1508.999 C292.567,1508.999 291,1510.566 291,1512.499 L291,1513.998 L298,1513.998 L298,1512.499 L298,1512.499 Z M300,1515.999 C300,1515.446 299.552,1514.998 299,1514.998 L290,1514.998 C289.447,1514.998 289,1515.446 289,1515.999 L289,1521.999 C289,1522.551 289.447,1522.998 290,1522.998 L299,1522.998 C299.552,1522.998 300,1522.551 300,1521.999 L300,1515.999 L300,1515.999 Z M294.5,1520.998 C294.224,1520.998 294,1520.774 294,1520.498 L294,1517.498 C294,1517.223 294.224,1516.999 294.5,1516.999 C294.776,1516.999 295,1517.223 295,1517.498 L295,1520.498 C295,1520.774 294.776,1520.998 294.5,1520.998 L294.5,1520.998 Z"></path></g></g></svg>';
+export const IconSvg = (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    width="11px"
+    height="14px"
+    viewBox="0 0 13 16"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    className="auth0-lock-icon auth0-lock-icon-box"
+  >
+    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g transform="translate(-288.000000, -1508.000000)" fill="#888888">
+        <path d="M299,1523.998 L290,1523.998 C288.896,1523.998 288,1523.102 288,1521.999 L288,1515.999 C288,1514.895 288.896,1513.998 290,1513.998 L290,1513.998 L290,1512.499 C290,1510.015 292.015,1507.999 294.5,1507.999 C296.985,1507.999 299,1510.015 299,1512.499 L299,1513.999 C300.104,1513.999 301,1514.895 301,1515.999 L301,1521.999 C301,1523.103 300.104,1523.998 299,1523.998 L299,1523.998 Z M298,1512.499 C298,1510.566 296.433,1508.999 294.5,1508.999 C292.567,1508.999 291,1510.566 291,1512.499 L291,1513.998 L298,1513.998 L298,1512.499 L298,1512.499 Z M300,1515.999 C300,1515.446 299.552,1514.998 299,1514.998 L290,1514.998 C289.447,1514.998 289,1515.446 289,1515.999 L289,1521.999 C289,1522.551 289.447,1522.998 290,1522.998 L299,1522.998 C299.552,1522.998 300,1522.551 300,1521.999 L300,1515.999 L300,1515.999 Z M294.5,1520.998 C294.224,1520.998 294,1520.774 294,1520.498 L294,1517.498 C294,1517.223 294.224,1516.999 294.5,1516.999 C294.776,1516.999 295,1517.223 295,1517.498 L295,1520.498 C295,1520.774 294.776,1520.998 294.5,1520.998 L294.5,1520.998 Z"></path>
+      </g>
+    </g>
+  </svg>
+);
 
 export default class PasswordInput extends React.Component {
   static propTypes = {
@@ -64,7 +81,7 @@ export default class PasswordInput extends React.Component {
         invalidHint={invalidHint}
         isValid={isValid}
         name="password"
-        icon={icon}
+        icon={IconSvg}
       >
         <input
           ref="input"

programming_language: JavaScript
filename: phone_number_input.jsx
change_type: ModificationType.MODIFY
diff: @@ -1,8 +1,29 @@
 import React from 'react';
 import InputWrap from './input_wrap';
 
-const svg =
-  '<svg aria-hidden="true" focusable="false" width="9px" height="14px" viewBox="0 0 9 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" class="auth0-lock-icon auth0-lock-icon-mobile"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"><g id="Lock" transform="translate(-204.000000, -3459.000000)" fill="#888888"><g id="SMS" transform="translate(153.000000, 3207.000000)"><g transform="translate(35.000000, 239.000000)"><path d="M24.1,15.625 L16.9,15.625 L16.9,14.75 C16.9,14.264375 17.30275,13.875 17.8,13.875 L23.2,13.875 C23.6968,13.875 24.1,14.264375 24.1,14.75 L24.1,15.625 L24.1,15.625 Z M16.9,16.5 L24.1,16.5 L24.1,21.75 L16.9,21.75 L16.9,16.5 Z M24.1,25.25 C24.1,25.73125 23.6968,26.125 23.2,26.125 L17.8,26.125 C17.30275,26.125 16.9,25.73125 16.9,25.25 L16.9,22.625 L24.1,22.625 L24.1,25.25 L24.1,25.25 Z M23.2,13 L17.8,13 C16.80595,13 16,13.783125 16,14.75 L16,25.25 C16,26.216875 16.80595,27 17.8,27 L23.2,27 C24.19405,27 25,26.216875 25,25.25 L25,14.75 C25,13.783125 24.19405,13 23.2,13 L23.2,13 Z M20.5,25.25 C20.9968,25.25 21.4,24.85625 21.4,24.375 C21.4,23.889375 20.9968,23.5 20.5,23.5 C20.00275,23.5 19.6,23.889375 19.6,24.375 C19.6,24.85625 20.00275,25.25 20.5,25.25 L20.5,25.25 Z"></path></g></g></g></g></svg>';
+const IconSvg = (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    width="9px"
+    height="14px"
+    viewBox="0 0 9 14"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    className="auth0-lock-icon auth0-lock-icon-mobile"
+  >
+    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g id="Lock" transform="translate(-204.000000, -3459.000000)" fill="#888888">
+        <g id="SMS" transform="translate(153.000000, 3207.000000)">
+          <g transform="translate(35.000000, 239.000000)">
+            <path d="M24.1,15.625 L16.9,15.625 L16.9,14.75 C16.9,14.264375 17.30275,13.875 17.8,13.875 L23.2,13.875 C23.6968,13.875 24.1,14.264375 24.1,14.75 L24.1,15.625 L24.1,15.625 Z M16.9,16.5 L24.1,16.5 L24.1,21.75 L16.9,21.75 L16.9,16.5 Z M24.1,25.25 C24.1,25.73125 23.6968,26.125 23.2,26.125 L17.8,26.125 C17.30275,26.125 16.9,25.73125 16.9,25.25 L16.9,22.625 L24.1,22.625 L24.1,25.25 L24.1,25.25 Z M23.2,13 L17.8,13 C16.80595,13 16,13.783125 16,14.75 L16,25.25 C16,26.216875 16.80595,27 17.8,27 L23.2,27 C24.19405,27 25,26.216875 25,25.25 L25,14.75 C25,13.783125 24.19405,13 23.2,13 L23.2,13 Z M20.5,25.25 C20.9968,25.25 21.4,24.85625 21.4,24.375 C21.4,23.889375 20.9968,23.5 20.5,23.5 C20.00275,23.5 19.6,23.889375 19.6,24.375 C19.6,24.85625 20.00275,25.25 20.5,25.25 L20.5,25.25 Z"></path>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
 
 export default class PhoneNumberInput extends React.Component {
   constructor(props) {
@@ -20,7 +41,7 @@ export default class PhoneNumberInput extends React.Component {
         isValid={isValid}
         invalidHint={invalidHint}
         name="phone-number"
-        icon={svg}
+        icon={IconSvg}
       >
         <input
           ref="input"

programming_language: TypeScript
filename: select_input.jsx
change_type: ModificationType.MODIFY
diff: @@ -1,8 +1,36 @@
 import React from 'react';
 import InputWrap from './input_wrap';
 
-const arrowSvg =
-  '<svg aria-hidden="true" focusable="false" width="5px" height="10px" viewBox="0 0 5 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" class="auth0-lock-icon-arrow"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"><g id="Lock" transform="translate(-396.000000, -3521.000000)" fill="#000000" opacity="0.539999962"><g id="SMS" transform="translate(153.000000, 3207.000000)"><g transform="translate(35.000000, 299.000000)"><g transform="translate(210.000000, 20.000000) rotate(-90.000000) translate(-210.000000, -20.000000) translate(198.000000, 8.000000)"><path id="Shape" d="M7,10 L12,15 L17,10 L7,10 Z"></path></g></g></g></g></g></svg>';
+const ArrowIconSvg = () => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    width="5px"
+    height="10px"
+    viewBox="0 0 5 10"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    className="auth0-lock-icon-arrow"
+  >
+    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g
+        id="Lock"
+        transform="translate(-396.000000, -3521.000000)"
+        fill="#000000"
+        opacity="0.539999962"
+      >
+        <g id="SMS" transform="translate(153.000000, 3207.000000)">
+          <g transform="translate(35.000000, 299.000000)">
+            <g transform="translate(210.000000, 20.000000) rotate(-90.000000) translate(-210.000000, -20.000000) translate(198.000000, 8.000000)">
+              <path id="Shape" d="M7,10 L12,15 L17,10 L7,10 Z"></path>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
 
 export default class SelectInput extends React.Component {
   constructor(props) {
@@ -42,7 +70,9 @@ export default class SelectInput extends React.Component {
           aria-label={ariaLabel || name}
           aria-invalid={!isValid}
         />
-        <span dangerouslySetInnerHTML={{ __html: arrowSvg }} />
+        <span>
+          <ArrowIconSvg />
+        </span>
       </InputWrap>
     );
   }

programming_language: TypeScript
filename: username_input.jsx
change_type: ModificationType.MODIFY
diff: @@ -1,8 +1,25 @@
 import React from 'react';
 import InputWrap from './input_wrap';
 
-const svg =
-  '<svg aria-hidden="true" focusable="false" width="13px" height="14px" viewBox="0 0 15 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="auth0-lock-icon auth0-lock-icon-box"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-11.000000, -1471.000000)" fill="#888888"><path d="M25.552,1486.998 L11.449,1486.998 C10.667,1485.799 10.984,1483.399 11.766,1482.6 C12.139,1482.219 14.931,1481.5 16.267,1481.172 C14.856,1480.076 13.995,1478.042 13.995,1476.103 C13.995,1473.284 14.813,1470.999 18.498,1470.999 C22.182,1470.999 23,1473.284 23,1476.103 C23,1478.037 22.145,1480.065 20.74,1481.163 C22.046,1481.489 24.88,1482.228 25.241,1482.601 C26.019,1483.399 26.328,1485.799 25.552,1486.998 L25.552,1486.998 Z M24.6,1483.443 C24.087,1483.169 21.881,1482.548 20,1482.097 L20,1480.513 C21.254,1479.659 21.997,1477.806 21.997,1476.12 C21.997,1473.841 21.414,1471.993 18.499,1471.993 C15.583,1471.993 15,1473.841 15,1476.12 C15,1477.807 15.744,1479.662 17,1480.515 L17,1482.112 C15.109,1482.556 12.914,1483.166 12.409,1483.442 C12.082,1483.854 11.797,1485.173 12,1486 L25,1486 C25.201,1485.174 24.922,1483.858 24.6,1483.443 L24.6,1483.443 Z"></path></g></g></svg>';
+const IconSvg = (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    width="13px"
+    height="14px"
+    viewBox="0 0 15 16"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    className="auth0-lock-icon auth0-lock-icon-box"
+  >
+    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g transform="translate(-11.000000, -1471.000000)" fill="#888888">
+        <path d="M25.552,1486.998 L11.449,1486.998 C10.667,1485.799 10.984,1483.399 11.766,1482.6 C12.139,1482.219 14.931,1481.5 16.267,1481.172 C14.856,1480.076 13.995,1478.042 13.995,1476.103 C13.995,1473.284 14.813,1470.999 18.498,1470.999 C22.182,1470.999 23,1473.284 23,1476.103 C23,1478.037 22.145,1480.065 20.74,1481.163 C22.046,1481.489 24.88,1482.228 25.241,1482.601 C26.019,1483.399 26.328,1485.799 25.552,1486.998 L25.552,1486.998 Z M24.6,1483.443 C24.087,1483.169 21.881,1482.548 20,1482.097 L20,1480.513 C21.254,1479.659 21.997,1477.806 21.997,1476.12 C21.997,1473.841 21.414,1471.993 18.499,1471.993 C15.583,1471.993 15,1473.841 15,1476.12 C15,1477.807 15.744,1479.662 17,1480.515 L17,1482.112 C15.109,1482.556 12.914,1483.166 12.409,1483.442 C12.082,1483.854 11.797,1485.173 12,1486 L25,1486 C25.201,1485.174 24.922,1483.858 24.6,1483.443 L24.6,1483.443 Z"></path>
+      </g>
+    </g>
+  </svg>
+);
 
 export default class UsernameInput extends React.Component {
   constructor(props) {
@@ -33,7 +50,7 @@ export default class UsernameInput extends React.Component {
         invalidHint={invalidHint}
         isValid={isValid}
         name="username"
-        icon={svg}
+        icon={IconSvg}
       >
         <input
           ref="input"

programming_language: JavaScript
filename: vcode_input.jsx
change_type: ModificationType.MODIFY
diff: @@ -2,8 +2,32 @@ import React from 'react';
 import InputWrap from './input_wrap';
 import { isSmallScreen } from '../../utils/media_utils';
 
-const svg =
-  '<svg aria-hidden="true" focusable="false" width="12px" height="14px" viewBox="0 0 12 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" class="auth0-lock-icon auth0-lock-icon-box"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"><g transform="translate(-964.000000, -3509.000000)" fill="#888888"><g transform="translate(915.000000, 3207.000000)"><g transform="translate(35.000000, 289.000000)"><path id="Fill-42" d="M25.0523108,22.8115806 L20.455448,26.0692401 L20.455448,20.6336024 L25.0523108,17.6924012 L25.0523108,22.8115806 L25.0523108,22.8115806 Z M20.1658456,19.763342 C20.1060864,19.786611 20.050924,19.8145338 19.9957617,19.8471103 C19.9451962,19.8191876 19.8946307,19.786611 19.8394683,19.7679958 L14.9392126,16.7616414 L19.986568,13.8949009 L25.0523108,16.7616414 L25.043117,16.7662952 L20.1658456,19.763342 L20.1658456,19.763342 Z M19.5360754,20.6336024 L19.5360754,26.0692401 L14.9392126,22.8115806 L14.9392126,17.6924012 L19.5360754,20.6336024 L19.5360754,20.6336024 Z M25.9716833,17.6924012 C25.9716833,17.5574411 25.9395053,17.4317885 25.8889398,17.3154435 C26.0728143,16.9664085 26.0314425,16.5242976 25.7418402,16.2311082 L20.4002856,13.2340614 C19.7980966,12.9408721 20.2393954,12.9036417 19.5590597,13.2340614 L14.2634738,16.2311082 C13.9692745,16.5242976 13.9279028,16.9571009 14.1071804,17.3107897 C14.0520181,17.4271347 14.01984,17.5527873 14.01984,17.6924012 L14.01984,22.8115806 C14.01984,23.3234985 14.4335577,23.7423404 14.9392126,23.7423404 L19.5360754,27 C19.7061593,27 19.8578558,26.9395006 19.9957617,26.8557322 C20.1336676,26.9395006 20.285364,27 20.455448,27 L25.511997,23.7423404 C26.017652,23.7423404 25.9716833,23.3234985 25.9716833,22.8115806 L25.9716833,17.6924012 L25.9716833,17.6924012 Z"></path></g></g></g></g></svg>';
+const IconSvg = (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    width="12px"
+    height="14px"
+    viewBox="0 0 12 14"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    className="auth0-lock-icon auth0-lock-icon-box"
+  >
+    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g transform="translate(-964.000000, -3509.000000)" fill="#888888">
+        <g transform="translate(915.000000, 3207.000000)">
+          <g transform="translate(35.000000, 289.000000)">
+            <path
+              id="Fill-42"
+              d="M25.0523108,22.8115806 L20.455448,26.0692401 L20.455448,20.6336024 L25.0523108,17.6924012 L25.0523108,22.8115806 L25.0523108,22.8115806 Z M20.1658456,19.763342 C20.1060864,19.786611 20.050924,19.8145338 19.9957617,19.8471103 C19.9451962,19.8191876 19.8946307,19.786611 19.8394683,19.7679958 L14.9392126,16.7616414 L19.986568,13.8949009 L25.0523108,16.7616414 L25.043117,16.7662952 L20.1658456,19.763342 L20.1658456,19.763342 Z M19.5360754,20.6336024 L19.5360754,26.0692401 L14.9392126,22.8115806 L14.9392126,17.6924012 L19.5360754,20.6336024 L19.5360754,20.6336024 Z M25.9716833,17.6924012 C25.9716833,17.5574411 25.9395053,17.4317885 25.8889398,17.3154435 C26.0728143,16.9664085 26.0314425,16.5242976 25.7418402,16.2311082 L20.4002856,13.2340614 C19.7980966,12.9408721 20.2393954,12.9036417 19.5590597,13.2340614 L14.2634738,16.2311082 C13.9692745,16.5242976 13.9279028,16.9571009 14.1071804,17.3107897 C14.0520181,17.4271347 14.01984,17.5527873 14.01984,17.6924012 L14.01984,22.8115806 C14.01984,23.3234985 14.4335577,23.7423404 14.9392126,23.7423404 L19.5360754,27 C19.7061593,27 19.8578558,26.9395006 19.9957617,26.8557322 C20.1336676,26.9395006 20.285364,27 20.455448,27 L25.511997,23.7423404 C26.017652,23.7423404 25.9716833,23.3234985 25.9716833,22.8115806 L25.9716833,17.6924012 L25.9716833,17.6924012 Z"
+            ></path>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
 
 export default class VcodeInput extends React.Component {
   constructor(props) {
@@ -25,7 +49,7 @@ export default class VcodeInput extends React.Component {
     const { focused } = this.state;
 
     return (
-      <InputWrap focused={focused} isValid={isValid} name="vcode" icon={svg}>
+      <InputWrap focused={focused} isValid={isValid} name="vcode" icon={IconSvg}>
         <input
           id={`${lockId}-vcode`}
           ref="input"

programming_language: TypeScript
filename: yarn.lock
change_type: ModificationType.MODIFY
diff: @@ -3634,6 +3634,11 @@ domhandler@^4.0.0:
   dependencies:
     domelementtype "^2.1.0"
 
+dompurify@^2.2.8:
+  version "2.2.8"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.2.8.tgz#ce88e395f6d00b6dc53f80d6b2a6fdf5446873c6"
+  integrity sha512-9H0UL59EkDLgY3dUFjLV6IEUaHm5qp3mxSqWw7Yyx4Zhk2Jn2cmLe+CNPP3xy13zl8Bqg+0NehQzkdMoVhGRww==
+
 domutils@^2.4.3, domutils@^2.4.4:
   version "2.4.4"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.4.4.tgz#282739c4b150d022d34699797369aad8d19bbbd3"
@@ -9420,7 +9425,7 @@ prop-types-exact@^1.2.0:
     object.assign "^4.1.0"
     reflect.ownkeys "^0.2.0"
 
-prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.0, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==

programming_language: Markdown