Skip to main content
Last modified: August 22, 2025
In HubSpot, users can configure brand settings to set up the company’s brand colors, logos, and favicons to be used across HubSpot content. With brand settings configured, you can access these settings via {{brand_settings.*}} HubL variables in HTML/HubL and CSS files, as well as theme and module field configuration files (fields.json). Below, learn about the available brand setting variables along with examples of implementation.

​
Quick reference

The following table lists all available brand settings HubL variables, with links to relevant sections below for more information.
SettingVariables
Primary color{{brand_settings.primaryColor}} {{brand_settings.colors[0]}}
Secondary color{{brand_settings.secondaryColor}}
Accent colors{{brand_settings.accentColor1}} {{brand_settings.accentColor2}} {{brand_settings.accentColor3}}
Additional colors{{brand_settings.colors[1-19]}}
Primary logo{{brand_settings.primaryLogo}} {{brand_settings.logos[0]}}
Domain logo (with fallback){{brand_settings.logo}}
Secondary logo{{brand_settings.logos[1]}} {{brand_settings.logos[0]}}
Additional logos{{brand_settings.logos[1-19]}}
Primary favicon{{brand_settings.primaryFavicon}} {{brand_settings.favicons[0]}}
Additional favicons{{brand_settings.favicons[1-19]}}
Domain favicon (with fallback){{brand_settings.favicon}}
Filters are available for retrieving specific values, depending on the variable:
  • Color variables: use the hex filter to access the color’s hex value.
  • Logo variables: use the set of logo filters to access image attributes such as src and width.
  • Favicon variables: use the src filter to access the favicon image source URL.
Implementation and usage will differ slightly between fields.json and HTML/HubL/CSS files:
  • Module and theme fields: in the fields.json file, include brand_settings.* values within the inherited_value and property_value_paths fields. This configures the module or theme to use the brand kit settings by default. Users will be able to edit these values as needed in the theme settings editor. When no settings are found, HubSpot will fall back to the default field values.

​
Please note

Favicon variables cannot be used in module or theme fields.json files.
  • HTML/HubL/CSS files: in a HTML/HubL or CSS file, include brand_settings.* values within HubL tokens (e.g., {{brand_settings.primaryColor}}). Values will be hardcoded and cannot be modified by users in HubSpot.
See sections below for usage examples.

​
Colors

Brand color variables can be used in module and theme fields.json files and in HTML/HubL and CSS files.
SettingTokens
Primary color{{brand_settings.primaryColor}} {{brand_settings.colors[0]}}
Secondary color{{brand_settings.secondaryColor}}
Accent colors{{brand_settings.accentColor1}} {{brand_settings.accentColor2}} {{brand_settings.accentColor3}}
Additional colors{{brand_settings.colors[1-19]}}
The hex filter is available if you need to directly access the color’s hex code (see CSS example below). 
{
"name": "branding_color",
"label": "branding_color",
"type": "color",
"default": {
"color": "#26ff55",
"opacity": 60
},
"inherited_value": {
"property_value_paths": {
"color": "brand_settings.primaryColor"
}
}
}

​
Color fallback logic

There are times when accounts may not have any additional colors configured in its brand settings. If your code is referencing an inherited color that does not exist in brand settings, the following fallback logic is used:
  • secondaryColor falls back to the first additional color (colors[1]).
  • accentColor1 falls back to the second additional color (colors[2]).
  • accentColor2 falls back to the third additional color (colors[3]).
  • accentColor3 falls back to the fourth additional color (colors[4]).
  • Additional colors (e.g., colors[3]) will fall back to the default value. If there is no default property color set, primaryColor will be used.

​
Logos

Brand logo variables can be used in module and theme fields.json files, as well as within HTML/HubL and CSS files.
SettingTokens
Primary logo{{brand_settings.primaryLogo}} {{brand_settings.logos[0]}}
Secondary logo{{brand_settings.logos[1]}} {{brand_settings.logos[0]}}
Additional logos{{brand_settings.logos[1-19]}}
Domain logo (with fallback){{brand_settings.logo}}
The following filters are available if you need to directly access logo image attributes:
  • Logo URL: {{brand_settings.primaryLogo.link}}
  • Logo alt text: {{brand_settings.primaryLogo.alt}}
  • Logo height: {{brand_settings.primaryLogo.height}}
  • Logo width: {{brand_settings.primaryLogo.width}}
  • Logo image URL: {{brand_settings.primaryLogo.src}}
{
"name": "site_logo",
"label": "Site Logo",
"type": "image",
"default": {
"src": "https://example.com/default-logo.png",
"alt": "Default Logo",
"width": 128,
"height": 128
},
"inherited_value": {
"property_value_paths": {
"src": "brand_settings.primaryLogo.src",
"alt": "brand_settings.primaryLogo.alt",
"width": "brand_settings.primaryLogo.width",
"height": "brand_settings.primaryLogo.height"
}
}
}

​
Logo fallback logic

The {{brand_settings.logo}} variable will render the logo set for the domain. If no logo is set for the domain, it will render the primary logo instead.

​
Favicons

Brand favicon variables can only be used in HTML/HubL and CSS files.
SettingTokens
Primary favicon{{brand_settings.primaryFavicon}} {{brand_settings.favicons[0]}}
Additional favicons{{brand_settings.favicons[1-19]}}
Domain favicon (with fallback){{brand_settings.favicon}}
The src filter is available if you need to access the favicon image’s source URL. For example: {{brand_settings.favicon.src}}. 
<html>
  <head>
    <title>{{content.html_title}}</title>

    <!-- Domain favicon or fallback to primary-->
    <link rel="icon" href="https://developers.hubspot.com/docs{{brand_settings.favicon.src}}" />
  </head>
  <body>
    <!-- Page content -->
  </body>
</html>

​
Favicon fallback logic

The {{brand_settings.favicon}} variable will render the favicon set for the domain. If no favicon is set for the domain, it will render the primary favicon instead.