> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging-quickstart-revamp.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Describes the MFA Widget theme options for customizing the theme properties of the MFA pages.

# MFA Widget Theme Options

When using your own HTML for <Tooltip tip="Multi-factor authentication (MFA): User authentication process that uses a factor in addition to username and password such as a code via SMS." cta="View Glossary" href="/docs/glossary?term=MFA">MFA</Tooltip> pages with Classic Login, it relies on the Auth0 MFA Widget which has the following limitations:

* It does not support MFA with email.
* If users enrolled more than one factor, they cannot select which one to use, the MFA widget prompts them to login with the most secure factor.
* It does not use <Tooltip tip="Universal Login: Your application redirects to Universal Login, hosted on Auth0's Authorization Server, to verify a user's identity." cta="View Glossary" href="/docs/glossary?term=Universal+Login">Universal Login</Tooltip>'s [internationalization](/docs/customize/internationalization-and-localization/universal-login-internationalization) features.

The theme options for the MFA Widget are namespaced under the `theme` property.

<table class="table">
  <thead>
    <tr>
      <th>Option</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>icon</code></td>
      <td>The URL for the imaged used in the header. Default is the Auth0 logo. Recommended height is 58 pixels.</td>
    </tr>

    <tr>
      <td><code>primaryColor</code></td>
      <td>Defines the primary color of the MFA widget. Useful when using a custom <code>icon</code> to ensure complimentary colors appear. Default is <code>#ea5323</code>.</td>
    </tr>
  </tbody>
</table>

## Examples

```js lines
return new Auth0MFAWidget({

...

  theme: {
    icon: 'https://example.com/assets/logo.png',
    primaryColor: 'blue'
  },
  
...  
  
})
```

See a [Guardian basic widget example](https://github.com/auth0/auth0-guardian.js/blob/master/example/basic_widget.html) using [auth0-guardian.js](https://github.com/auth0/auth0-guardian.js). See the [readme](https://github.com/auth0/auth0-guardian.js/tree/master/example) for details.

## Learn more

* [Customize MFA for Classic Login](/docs/secure/multi-factor-authentication/customize-mfa/customize-mfa-classic-login)
* [MFA Theme Language Dictionary](/docs/secure/multi-factor-authentication/customize-mfa/mfa-theme-language-dictionary)