---
schema_version: "1"
id: 8689331250865818fcbe36c650ab1eba012de16582b86043b669846a996113f0
title: Set Icons for Social Login
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/experience/264-0-0/rss_login_social_signon.md
canonical_url: https://help.salesforce.com/s/articleView?id=experience.rss_login_social_signon.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: f76b8e9003763b3275052d6852f4ff3ca11a570a909cbdf5ef0d732eba6d8c86
description: The Social Login component provides users with icons that they can click to log in to a third-party account, such as Facebook© or LinkedIn©. Set these icons for each authentication provider that you configure for the org.
products:
  - Experiences
release: "264"
---
# Set Icons for Social Login

The Social Login component provides users with icons that they can click to log in to a third-party account, such as Facebook© or LinkedIn©. Set these icons for each authentication provider that you configure for the org.

Some users prefer to use an existing account with a service such as Facebook to log in to the site instead of setting up a new account and password. The third-party service is an authentication provider that verifies user identification. Use the Social Login component to add an icon for each supported authentication provider. The user clicks the icon and logs in using the associated account’s username and password.

Before you add the Social Login component, set up each authentication provider. For more information, see [Authentication Providers](https://help.salesforce.com/s/articleView?id=experience.sso_authentication_providers.htm&type=5&language=en_US).

1. Select the **Social Login** component in the page that you're configuring.
2. In the property editor, configure the properties for the component.
    
    <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
            <colgroup>
              <col style="width:28.000000000000004%">
              <col style="width:72%">
            </colgroup>
            <thead class="slds-text-title_caps ">
              <tr class="">
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d118357e64">Property</th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d118357e67">Details</th>
              </tr>
            </thead>
            <tbody>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d118357e64 ">
                  <samp class="parmname">Show Header</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d118357e67 ">To show a text header above the authentication header
                  icons, select this option.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d118357e64 ">
                  <samp class="parmname">Header Text</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d118357e67 ">Enter the text for the header text.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d118357e64 ">
                  <samp class="parmname">Use Experience Builder site auth provider
                    URLs</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d118357e67 ">
                  <p>This option is selected by default in new Experience
                    Builder sites and in new Social Login components that you
                    add to existing sites. It improves performance and reduces
                    HTTP redirects by using site-specific URLs for single
                    sign-on (SSO) for all auth providers for your site. Copy the
                    site’s callback URL in Auth. Providers in Setup. Update the
                    callback URLs in your identity provider accordingly. When
                    you deselect this option, Salesforce continues to use
                    <samp class="filepath">login.salesforce.com</samp> or
                    <samp class="filepath">test.salesforce.com</samp> to redirect to
                    your site during SSO, which can result in decreased
                    performance.
                  </p>
                  <p style="margin-bottom:0;">If you configure Apple as an external
                    authentication provider, select this option to ensure
                    that the Social Login component recognizes user
                    information.</p>
                </td>

              </tr>
            </tbody>
          </table>

![Example](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/images/icon_example.png)

Example Sample Social Login component with “or log in with” text (1) and authentication provider icons (2).

![Sample Social Login component](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/communities/images/login_social_login.png)

#### See Also

- [Which Components Can I Use with Each Aura Template?](https://help.salesforce.com/s/articleView?id=experience.rss_component_reference_table.htm&release=264.0.0&type=5 "Aura site templates, such as Customer Service and Partner Central, are each composed of pages, which in turn are made up of customizable components. Consult this table to find out which Aura template each component can be used in, and when the component became available.")