AddToAny button colors can be perfectly customized to match any design's color scheme. You can set a custom background color to replace the original icon colors, and also set a custom foreground color to replace the default white color of vector graphics.

Background icon color

Specify a custom color to apply the color globally to all AddToAny buttons, including the buttons in AddToAny menus.

var a2a_config = a2a_config || {};
a2a_config.icon_color = "#0166ff";

In Drupal, add the following JavaScript code to your "Additional JavaScript" box in Configuration > Web services > AddToAny > Additional Options.

In WordPress, go to Settings > AddToAny > Icon Style, then change "Original" background to "Custom…" to select a color.

a2a_config.icon_color = "#0166ff";

a2a_config.icon_color = "deeppink";

For transparent icons, you can change "Original" background to "Transparent".

a2a_config.icon_color = "transparent";

Foreground icon color

You can change the foreground color of your icons by specifying a second icon_color value separated by a comma.

In Drupal, add the following JavaScript code to your "Additional JavaScript" box in Configuration > Web services > AddToAny > Additional Options.

In WordPress, go to Settings > AddToAny > Icon Style, then change "Original" foreground to "Custom…" to select a color.

a2a_config.icon_color = "seashell,midnightblue";

The special keyword unset will display the original background colors.

a2a_config.icon_color = "unset,#fff5ee";

Groups of different colors

You can use a data attribute to set a custom color on a particular group of icons. This is useful for overriding the global custom color when the JavaScript method is used.

<div class="a2a_kit a2a_kit_size_32 a2a_default_style" data-a2a-icon-color="lightseagreen">
    <a class="a2a_button_facebook"></a>
    <a class="a2a_button_mastodon"></a>
    <a class="a2a_button_email"></a>
    <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
</div>

<script async src="https://static.addtoany.com/menu/page.js"></script>

The special keyword unset will display the original icons.

data-a2a-icon-color="unset"