---
title: "i2b2 SAML: Customize Identity Provider (IdP) Login Button"
description: "A guide on how to customize the IdP login button color, icon and text. By default the IdP login button looks like the one shown below: ![default IdP login button](https://github.com/kvb2univpitt/i2b2-saml-demo/raw/main/doc/custom_idp_login_button/default_login.png) ## Changing the Color of the IdP Login Button Modify…"
url: "https://i2b2.org/docs/i2b2-saml-customize-identity-provider-idp-login-button/"
updated: "2026-09-15"
category: i2b2 Installation Guide / Chapter 8. SAML Setup for i2b2 (v1.7.13 release)
---

# i2b2 SAML: Customize Identity Provider (IdP) Login Button

A guide on how to customize the IdP login button color, icon and text.

By default the IdP login button looks like the one shown below:

![default IdP login button](https://github.com/kvb2univpitt/i2b2-saml-demo/raw/main/doc/custom_idp_login_button/default_login.png)

## Changing the Color of the IdP Login Button

Modify the file ***index.php*** file located in the webclient directory. Change the attribute values of the CSS classs ***btn-idp*** and ***btn-idp:hover***.

### CSS Class: btn-idp

The color of the login button.

##### Attribute Value Descriptions and Examples

| Attribute | Description | Example Value | Example Value Description |
| --- | --- | --- | --- |
| color | button text color | #fff | white |
| background-color | button color | #008000 | green |
| border-color | button border color | #008000 | green |

##### Example Result

![Example Login Button Color](https://github.com/kvb2univpitt/i2b2-saml-demo/raw/main/doc/custom_idp_login_button/btn-idp-color.png)

### CSS Class: btn-idp:hover

The color of the login button when you move the mouse over it.

##### Attribute Value Descriptions and Examples

| Attribute | Description | Example Value | Example Value Description |
| --- | --- | --- | --- |
| color | button text color | #000 | black |
| background-color | button color | #90EE90 | light green |
| border-color | button border color | #008000 | green |

##### Example Result

![Example Login Button Color](https://github.com/kvb2univpitt/i2b2-saml-demo/raw/main/doc/custom_idp_login_button/btn-idp-hover-color.png)

## Changing the Logo of the IdP Login Button

The icon should be 16x16 pixel. For an example, below is 16x16 pixel icon file ***reindeer-deer-icon.png***:

![16x16 icon](https://github.com/kvb2univpitt/i2b2-saml-demo/raw/main/doc/custom_idp_login_button/reindeer-deer-icon.png)

Add the icon to the directory **assets/images** of the webclient.

Modify the file ***i2b2_ui_config.js*** located in the directory **js-i2b2** of the webclient. Change the value of the attribute ***loginIdpIcon*** to the *relative location* of the icon file.

##### Example Configuration

```
i2b2.UI.cfg = {
    ...

    loginIdpIcon: "assets/images/reindeer-deer-icon.png", /* Location of the 16x16 icon */

    ...
}
```

##### Example Result

![Logo Change](https://github.com/kvb2univpitt/i2b2-saml-demo/raw/main/doc/custom_idp_login_button/btn-idp-logo-change.png)

## Changing the IdP Name of IdP Login Button

Modify the file ***i2b2_ui_config.js*** located in the directory **js-i2b2** of the webclient. Change the value of the attribute ***loginIdp*** to the name of your IdP.

##### Example Configuration

```
i2b2.UI.cfg = {
    ...

    loginIdp: "Reindeer University", /* Text for federated login button */

    ...
}
```

##### Example Result

![Text Change](https://github.com/kvb2univpitt/i2b2-saml-demo/raw/main/doc/custom_idp_login_button/btn-idp-text-change.png)