New features

Use the govuk-focused-form-input mixin to style focus states for form inputs

You can now use the govuk-focused-form-input mixin to style the focus state in your own form input components.

Thanks to @patrickpatrickpatrick for suggesting this change.

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

• #6222: Fall back to the 'other' translation in older browsers that do not support Intl.PluralRules and remove fallback logic
• #6232: Remove fieldset indentation from checkboxes and radios – thanks to @RichardBradley, @devkokov and @nathdolan for reporting this issue

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

• #6138: Fix file upload being invisible when using the 'JavaScript enhanced' version with an empty label – thanks to @JoPintoPaul for reporting this issue
• #6164: Fix handling of scope being null when calling createAll() or initAll() – thanks to @colinrotherham for reporting and fixing this issue
• #6184: Fix thickness of underlines on previous and next pagination links in Safari – thanks to @frankieroberto for reporting this issue

To install this version with npm, run npm install [email protected]. You can also find more information about how to stay up to date in our documentation.

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

• #6047: Fix text within the inverse Service navigation variant not appearing in white – thanks to @peteryates for reporting this issue
• #6084: Output hexadecimal colours for govuk-shade and govuk-tint

New features

The Service navigation component no longer uses a menu on mobile for a single link

If you're using our Nunjucks macros, the Service navigation component will no longer collapse the navigation behind a Menu toggle on mobile if there's only one navigation link.

You can control this behaviour using the new collapseNavigationOnMobile Nunjucks option.

If you're not using our Nunjucks macros, you can recreate this behaviour by omitting the Menu <button> element when there is only one navigation item.

We made this change in pull request #6016: Don’t use menu for service nav with a single link.

Add inverse styling to Service navigation for use on product pages

If you enable the GOV.UK rebrand, you can now add the govuk-service-navigation--inverse class to the Service navigation component to use white links on a blue background.

This allows the rebranded GOV.UK header and Service navigation components to flow seamlessly with any following components that have a blue background, as is common on GOV.UK Digital Service Platform pages.

We made this change in pull request #6015: Add inverse variant to Service navigation component.

You'll now see a deprecation warning if you're using LibSass

If you're using the deprecated LibSass library, you'll now see this deprecation warning when compiling your Sass:

It looks like you may be using LibSass to compile your Sass. LibSass is deprecated and will not be supported by the next major version of GOV.UK Frontend. See https://sass-lang.com/libsass/ for more information. To silence this warning, update $govuk-suppressed-warnings with key: "libsass"

We made this change in pull request #5993: Warn if Sass is compiled using libsass.

Deprecated features

Replace references to CSS custom properties for breakpoints

We've renamed the CSS custom properties for breakpoints to simplify the prefix from --govuk-frontend to just --govuk.

You can still use the old names, but we'll remove them in the next breaking release (GOV.UK Frontend v6.0.0).

We made this change in pull request #6014: Simplify prefix for breakpoint custom properties.

Fixes

We've updated the SVG (Scalable Vector Graphics) file of the GOV.UK logo to fix some imperfections visible at high zoom levels. Thanks to @matteason for reporting this.

If you're using the govukHeader Nunjucks macro, you do not need to update anything. If you're not using the macro, replace the logo's SVG code in the header with the following code:

<svg
  focusable="false"
  role="img"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 324 60"
  height="30"
  width="162"
  fill="currentcolor"
  class="govuk-header__logotype"
  aria-label="GOV.UK">
  <title>GOV.UK</title>
  <g>
    <circle cx="20" cy="17.6" r="3.7"></circle>
    <circle cx="10.2" cy="23.5" r="3.7"></circle>
    <circle cx="3.7" cy="33.2" r="3.7"></circle>
    <circle cx="31.7" cy="30.6" r="3.7"></circle>
    <circle cx="43.3" cy="17.6" r="3.7"></circle>
    <circle cx="53.2" cy="23.5" r="3.7"></circle>
    <circle cx="59.7" cy="33.2" r="3.7"></circle>
    <circle cx="31.7" cy="30.6" r="3.7"></circle>
    <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"></path>
  </g>
  <circle class="govuk-logo-dot" cx="226" cy="36" r="7.3"></circle>
  <path d="M93.94 41.25c.4 1.81 1.2 3.21 2.21 4.62 1 1.4 2.21 2.41 3.61 3.21s3.21 1.2 5.22 1.2 3.61-.4 4.82-1c1.4-.6 2.41-1.4 3.21-2.41.8-1 1.4-2.01 1.61-3.01s.4-2.01.4-3.01v.14h-10.86v-7.02h20.07v24.08h-8.03v-5.56c-.6.8-1.38 1.61-2.19 2.41-.8.8-1.81 1.2-2.81 1.81-1 .4-2.21.8-3.41 1.2s-2.41.4-3.81.4a18.56 18.56 0 0 1-14.65-6.63c-1.6-2.01-3.01-4.41-3.81-7.02s-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83a20.45 20.45 0 0 1 19.46-13.65c3.21 0 4.01.2 5.82.8 1.81.4 3.61 1.2 5.02 2.01 1.61.8 2.81 2.01 4.01 3.21s2.21 2.61 2.81 4.21l-7.63 4.41c-.4-1-1-1.81-1.61-2.61-.6-.8-1.4-1.4-2.21-2.01-.8-.6-1.81-1-2.81-1.4-1-.4-2.21-.4-3.61-.4-2.01 0-3.81.4-5.22 1.2-1.4.8-2.61 1.81-3.61 3.21s-1.61 2.81-2.21 4.62c-.4 1.81-.6 3.71-.6 5.42s.8 5.22.8 5.22Zm57.8-27.9c3.21 0 6.22.6 8.63 1.81 2.41 1.2 4.82 2.81 6.62 4.82S170.2 24.39 171 27s1.4 5.62 1.4 8.83-.4 6.02-1.4 8.83-2.41 5.02-4.01 7.02-4.01 3.61-6.62 4.82-5.42 1.81-8.63 1.81-6.22-.6-8.63-1.81-4.82-2.81-6.42-4.82-3.21-4.41-4.01-7.02-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83 2.41-5.02 4.01-7.02 4.01-3.61 6.42-4.82 5.42-1.81 8.63-1.81Zm0 36.73c1.81 0 3.61-.4 5.02-1s2.61-1.81 3.61-3.01 1.81-2.81 2.21-4.41c.4-1.81.8-3.61.8-5.62 0-2.21-.2-4.21-.8-6.02s-1.2-3.21-2.21-4.62c-1-1.2-2.21-2.21-3.61-3.01s-3.21-1-5.02-1-3.61.4-5.02 1c-1.4.8-2.61 1.81-3.61 3.01s-1.81 2.81-2.21 4.62c-.4 1.81-.8 3.61-.8 5.62 0 2.41.2 4.21.8 6.02.4 1.81 1.2 3.21 2.21 4.41s2.21 2.21 3.61 3.01c1.4.8 3.21 1 5.02 1Zm36.32 7.96-12.24-44.15h9.83l8.43 32.77h.4l8.23-32.77h9.83L200.3 58.04h-12.24Zm74.14-7.96c2.18 0 3.51-.6 3.51-.6 1.2-.6 2.01-1 2.81-1.81s1.4-1.81 1.81-2.81a13 13 0 0 0 .8-4.01V13.9h8.63v28.15c0 2.41-.4 4.62-1.4 6.62-.8 2.01-2.21 3.61-3.61 5.02s-3.41 2.41-5.62 3.21-4.62 1.2-7.02 1.2-5.02-.4-7.02-1.2c-2.21-.8-4.01-1.81-5.62-3.21s-2.81-3.01-3.61-5.02-1.4-4.21-1.4-6.62V13.9h8.63v26.95c0 1.61.2 3.01.8 4.01.4 1.2 1.2 2.21 2.01 2.81.8.8 1.81 1.4 2.81 1.81 0 0 1.34.6 3.51.6Zm34.22-36.18v18.92l15.65-18.92h10.82l-15.03 17.32 16.03 26.83h-10.21l-11.44-20.21-5.62 6.22v13.99h-8.83V13.9"></path>
</svg>

We made this change in pull request #6036: Fix some wordmark artifacts at high zoom levels.

We've also made fixes to GOV.UK Frontend in the following pull requests:

• #6011: Derive rebranded tints from $govuk-brand-colour – thanks to @tamoreton for proposing this change
• #6018: Fix layout of Service navigation in Edge when forced colours are enabled
• #6019: Fix service nav wrapper not filling available width – thanks to @joelanman for reporting and fixing this issue

Fixes

We've updated the SVG (Scalable Vector Graphics) file of the GOV.UK logo to fix some imperfections visible at high zoom levels. Thanks to @matteason for reporting this.

If you're using the govukHeader Nunjucks macro, you do not need to update anything. If you're not using the macro, replace the logo's SVG code in the header with the following code:

<svg
  focusable="false"
  role="img"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 324 60"
  height="30"
  width="162"
  fill="currentcolor"
  class="govuk-header__logotype"
  aria-label="GOV.UK">
  <title>GOV.UK</title>
  <g>
    <circle cx="20" cy="17.6" r="3.7"></circle>
    <circle cx="10.2" cy="23.5" r="3.7"></circle>
    <circle cx="3.7" cy="33.2" r="3.7"></circle>
    <circle cx="31.7" cy="30.6" r="3.7"></circle>
    <circle cx="43.3" cy="17.6" r="3.7"></circle>
    <circle cx="53.2" cy="23.5" r="3.7"></circle>
    <circle cx="59.7" cy="33.2" r="3.7"></circle>
    <circle cx="31.7" cy="30.6" r="3.7"></circle>
    <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"></path>
  </g>
  <circle class="govuk-logo-dot" cx="226" cy="36" r="7.3"></circle>
  <path d="M93.94 41.25c.4 1.81 1.2 3.21 2.21 4.62 1 1.4 2.21 2.41 3.61 3.21s3.21 1.2 5.22 1.2 3.61-.4 4.82-1c1.4-.6 2.41-1.4 3.21-2.41.8-1 1.4-2.01 1.61-3.01s.4-2.01.4-3.01v.14h-10.86v-7.02h20.07v24.08h-8.03v-5.56c-.6.8-1.38 1.61-2.19 2.41-.8.8-1.81 1.2-2.81 1.81-1 .4-2.21.8-3.41 1.2s-2.41.4-3.81.4a18.56 18.56 0 0 1-14.65-6.63c-1.6-2.01-3.01-4.41-3.81-7.02s-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83a20.45 20.45 0 0 1 19.46-13.65c3.21 0 4.01.2 5.82.8 1.81.4 3.61 1.2 5.02 2.01 1.61.8 2.81 2.01 4.01 3.21s2.21 2.61 2.81 4.21l-7.63 4.41c-.4-1-1-1.81-1.61-2.61-.6-.8-1.4-1.4-2.21-2.01-.8-.6-1.81-1-2.81-1.4-1-.4-2.21-.4-3.61-.4-2.01 0-3.81.4-5.22 1.2-1.4.8-2.61 1.81-3.61 3.21s-1.61 2.81-2.21 4.62c-.4 1.81-.6 3.71-.6 5.42s.8 5.22.8 5.22Zm57.8-27.9c3.21 0 6.22.6 8.63 1.81 2.41 1.2 4.82 2.81 6.62 4.82S170.2 24.39 171 27s1.4 5.62 1.4 8.83-.4 6.02-1.4 8.83-2.41 5.02-4.01 7.02-4.01 3.61-6.62 4.82-5.42 1.81-8.63 1.81-6.22-.6-8.63-1.81-4.82-2.81-6.42-4.82-3.21-4.41-4.01-7.02-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83 2.41-5.02 4.01-7.02 4.01-3.61 6.42-4.82 5.42-1.81 8.63-1.81Zm0 36.73c1.81 0 3.61-.4 5.02-1s2.61-1.81 3.61-3.01 1.81-2.81 2.21-4.41c.4-1.81.8-3.61.8-5.62 0-2.21-.2-4.21-.8-6.02s-1.2-3.21-2.21-4.62c-1-1.2-2.21-2.21-3.61-3.01s-3.21-1-5.02-1-3.61.4-5.02 1c-1.4.8-2.61 1.81-3.61 3.01s-1.81 2.81-2.21 4.62c-.4 1.81-.8 3.61-.8 5.62 0 2.41.2 4.21.8 6.02.4 1.81 1.2 3.21 2.21 4.41s2.21 2.21 3.61 3.01c1.4.8 3.21 1 5.02 1Zm36.32 7.96-12.24-44.15h9.83l8.43 32.77h.4l8.23-32.77h9.83L200.3 58.04h-12.24Zm74.14-7.96c2.18 0 3.51-.6 3.51-.6 1.2-.6 2.01-1 2.81-1.81s1.4-1.81 1.81-2.81a13 13 0 0 0 .8-4.01V13.9h8.63v28.15c0 2.41-.4 4.62-1.4 6.62-.8 2.01-2.21 3.61-3.61 5.02s-3.41 2.41-5.62 3.21-4.62 1.2-7.02 1.2-5.02-.4-7.02-1.2c-2.21-.8-4.01-1.81-5.62-3.21s-2.81-3.01-3.61-5.02-1.4-4.21-1.4-6.62V13.9h8.63v26.95c0 1.61.2 3.01.8 4.01.4 1.2 1.2 2.21 2.01 2.81.8.8 1.81 1.4 2.81 1.81 0 0 1.34.6 3.51.6Zm34.22-36.18v18.92l15.65-18.92h10.82l-15.03 17.32 16.03 26.83h-10.21l-11.44-20.21-5.62 6.22v13.99h-8.83V13.9"></path>
</svg>

We made this change in pull request #6036: Fix some wordmark artifacts at high zoom levels.

We've also made fixes to GOV.UK Frontend in the following pull requests:

• #6029: Fix background colour of .govuk-template--rebranded

To install this version with npm, run npm install [email protected]. You can also find more information about how to stay up to date in our documentation.

New features

The Service navigation component no longer uses a menu on mobile for a single link

If you're using our Nunjucks macros, the Service navigation component will no longer collapse the navigation behind a 'Menu' toggle if there is only one navigation item.

You can control this behaviour using the new collapseNavigationOnMobile Nunjucks option.

If you are not using our Nunjucks macros, you can recreate this behaviour by omitting the 'Menu' <button> element if there is only one navigation item.

This change was introduced in pull request #6016: Don’t use menu for service nav with a single link.

Added inverse styling to Service navigation for use on product pages

When the GOV.UK rebrand is enabled, you can now add the govuk-service-navigation--inverse class to the Service navigation component to use white links on a blue background.

This allows the rebranded GOV.UK header and Service navigation to flow seamlessly with subsequent components that have a blue background, as is common on GOV.UK Digital Service Platform pages.

This change was made in pull request #6015: Add inverse variant to Service navigation component.

Deprecated features

Replace references to CSS custom properties for breakpoints

We've renamed the CSS custom properties for breakpoints to simplify the prefix from --govuk-frontend to just --govuk.

You can still use the old names, but we'll remove them in the next breaking release (GOV.UK Frontend v6.0.0).

This change was introduced in pull request #6014: Simplify prefix for breakpoint custom properties.

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

• #6018: Fix layout of Service navigation in Edge when forced colours are enabled
• #6019: Fix service nav wrapper not filling available width, thanks to @joelanman for reporting and fixing this issue

To install this version with npm, run npm install [email protected]. You can also find more information about how to stay up to date in our documentation.

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

• #5968: Apply header logo right padding only when menu button is visible

We do not plan to make any further updates to GOV.UK Frontend v4. Consider upgrading to GOV.UK Frontend v5 to get the latest changes.

To install this version with npm, run npm install [email protected]. You can also find more information about how to stay up to date in our documentation.

New features

Prepare to use the refreshed GOV.UK brand

We’ve added features from the latest version of GOV.UK Frontend to help more services implement GOV.UK’s refreshed brand. Ahead of the brand’s go-live date of 25 June 2025, you should prepare your service by updating its code. You’ll then need to deploy the changes to production on 25 June 2025 or as soon after this date as possible.

The changes affect these components:

• GOV.UK header
• GOV.UK footer
• Cookie banner

The changes also affect the theme-color metadata and updated assets, including:

• icons
• Open Graph image
• manifest.json

To help you get ready, we've published this release, which includes several features to make the necessary updates across your service:

• updated markup for the GOV.UK header component (with the refreshed logo) and GOV.UK footer component (adding the crown logo)
• a new govuk-template--rebranded HTML class to apply updated styles from our CSS
• a new set of assets for icons, Open Graph image and page metadata

You’ll need to serve the new assets in your service. After that, what you’ll need to do depends on the code in your service and if you use GOV.UK Frontend:

• with its Nunjucks page template and macros
• with its Nunjucks macros (without the page template)
• without using Nunjucks

Add the brand refresh assets to your project

GOV.UK Frontend provides updated assets for the icons, Open Graph image and manifest.json to reflect the refreshed brand. These assets are available in the dist/govuk/assets/rebrand folder of the package.

Additionally, for the brand refresh, we’ve changed the names, formats and sizes of icon assets we distribute in Frontend.

Check that you’ve copied the following files from the /assets/rebrand/ directory to the correct place and are serving them at the correct URLs:

• manifest.json
• images/favicon.ico
• images/favicon.svg
• images/govuk-icon-180.png
• images/govuk-icon-192.png
• images/govuk-icon-512.png
• images/govuk-icon-mask.svg
• images/govuk-opengraph-image.png

If you serve the assets from the GOV.UK Frontend assets folder, make sure you’re serving the assets inside the dist/govuk/assets/rebrand folder correctly at <YOUR-SITE-URL>/assets/rebrand.

If you copy the font and image files into your application, you’ll need to copy the dist/govuk/assets/rebrand folder to <YOUR-APP>/assets/rebrand. If you use an automated task to copy the files, you may need to update your task to automatically copy our new folder.

Use the refreshed GOV.UK brand if you're using our Nunjucks page template

If you can edit your Nunjucks environment, you can add a govukRebrand global value to your environment, with a value of true. This global value makes the affected components use new styles for the brand refresh and display the updated assets (such as the refreshed logo in the GOV.UK header component and the crown in the GOV.UK footer component).

nunjucksEnv.addGlobal('govukRebrand', true)

If you cannot edit your Nunjucks environment, you can use our new govukRebrand 'variable' option from our page template, which makes:

• the Cookie banner component use new styles for the brand refresh
• the GOV.UK header and GOV.UK footer components rendered in the header and footer blocks display updated assets (such as the refreshed logo in the GOV.UK header component and the crown in the GOV.UK footer component)

If you’ve overridden the header or footer block, see the next sections to make sure your header or footer displays the updated assets.

Use set to assign the govukRebrand variable a value of true and enable the new styles:

{% set govukRebrand = true %}

Do not place this code snippet between any block and endblock lines. Place it on a separate line.

If you’ve previously customised the template's assetPath, assetUrl or opengraphImageUrl options, you may need to update these to point to the location of the updated icons, Open Graph image and manifest.json.

Use the refreshed GOV.UK brand if you're using Nunjucks macro (without the page template)

You can do this by adding the updated styles for these components:

• GOV.UK header
• GOV.UK footer
• Cookie banner

Add the govuk-template--rebranded class to the <html> element of your page to apply the updated styles to all affected components.

Enable the refreshed GOV.UK logo by adding rebrand: true to the GOV.UK header component configuration.

{{ govukHeader({
  rebrand: true
}) }}

Enable the GOV.UK crown in the GOV.UK footer component by addingrebrand: true to the component configuration.

{{ govukFooter({
  rebrand: true
}) }}

To use our updated social icon assets, change the HTML inside your element to use the new file path (from /assets/ to /assets/rebrand/) and theme-color metadata.

<meta name="theme-color" content="#1d70b8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" sizes="48x48" href="/assets/rebrand/images/favicon.ico">
<link rel="icon" sizes="any" href="/assets/rebrand/images/favicon.svg" type="image/svg+xml">
<link rel="mask-icon" href="/assets/rebrand/images/govuk-icon-mask.svg" color="#1d70b8">
<link rel="apple-touch-icon" href="/assets/rebrand/images/govuk-icon-180.png">
<link rel="manifest" href="/assets/rebrand/manifest.json">
<meta property="og:image" content="<SERVICE URL>/assets/rebrand/images/govuk-opengraph-image.png">

Use the refreshed GOV.UK brand if you're not using Nunjucks

To use the refreshed GOV.UK brand if you’re not using Nunjucks, start by adding the govuk-template--rebranded class to the <html> element of your page to apply the updated styles to all affected components.

As you make changes, use the examples on our website to check your updates:

• GOV.UK header
• GOV.UK footer
• Cookie banner

We've updated the GOV.UK logo to merge the GOV.UK text with the crown graphic. This makes sure the full logo is always rendered correctly even if parts of the page, such as CSS or the Transport webfont, fail to load. To use the updated logo, replace the <svg> element and ‘GOV.UK’ text inside govuk-header__logotype-text <span> element in your header with the following SVG code to display the refreshed GOV.UK logo:

<svg
  xmlns="http://www.w3.org/2000/svg"
  focusable="false"
  role="img"
  viewBox="0 0 324 60"
  height="30"
  width="162"
  fill="currentcolor"
  class="govuk-header__logotype"
  aria-label="GOV.UK">
  <title>GOV.UK</title>
  <g>
    <circle cx="20" cy="17.6" r="3.7"></circle>
    <circle cx="10.2" cy="23.5" r="3.7"></circle>
    <circle cx="3.7" cy="33.2" r="3.7"></circle>
    <circle cx="31.7" cy="30.6" r="3.7"></circle>
    <circle cx="43.3" cy="17.6" r="3.7"></circle>
    <circle cx="53.2" cy="23.5" r="3.7"></circle>
    <circle cx="59.7" cy="33.2" r="3.7"></circle>
    <circle cx="31.7" cy="30.6" r="3.7"></circle>
    <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"></path>
  </g>
  <circle class="govuk-logo-dot" cx="227" cy="36" r="7.3"></circle>
  <path d="M94.7,36.1c0,1.9.2,3.6.7,5.4.5,1.7,1.2,3.2,2.1,4.5.9,1.3,2.2,2....

To install this version with npm, run npm install [email protected]. You can also find more information about how to stay up to date in our documentation.

Brand refresh fixes

We’ve fixed the colour of the dot in the refreshed GOV.UK logo as well as made some fixes to the implementation of the brand refresh in GOV.UK Frontend. We did this in the following pull requests:

• #5962: Fix colour of refreshed GOV.UK logo's dot
• #5905: Fix unnecessary whitespace after logo
• #5920: Fix transparency around edge of rebranded favicon.ico, thanks to @matteason for reporting and fixing this issue

Other fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

• #5908: Fix footer licence link reflowing on focus in Safari
• #5919: Update deprecation warning message to make it clearer how to update to new organisation colour palette
• #5953: Move organisation legacy colour palette warning into the govuk-organisation-colour mixin
• #5918: Fix govuk-font-size mixin outputting the wrong font properties for size 14 text when compiled using libsass, thanks to @oscarduignan for reporting this issue
• #5896: Fix character count not having error border colour when rendered with error message, thanks to @gunjam for fixing this issue

To install this version with npm, run npm install [email protected]. You can also find more information about how to stay up to date in our documentation.

New features

Prepare to use the refreshed GOV.UK brand

We’ve added features to GOV.UK Frontend to implement GOV.UK’s refreshed brand. Ahead of the brand’s go-live date of 25 June 2025, prepare your service by updating its code. You’ll then need to deploy the changes to production on 25 June 2025 or as soon after this date as possible.

These changes affect these components:

• GOV.UK header
• GOV.UK footer
• Service navigation
• Cookie banner

These changes also affect the theme-color metadata and assets, including:

• icons
• Open Graph image
• manifest.json

To help you get ready, we've published this release, which includes several features to make the necessary updates across your service:

• updated markup for the GOV.UK header component (with the refreshed logo) and GOV.UK footer component (adding the crown logo)
• a new govuk-template--rebranded HTML class to apply updated styles from our CSS
• a new set of assets for icons, Open Graph image and page metadata

You’ll need to serve the new assets in your service. What you’ll need to do after that depends on the code in your service and if you use GOV.UK Frontend:

• with its Nunjucks page template and macros
• with its Nunjucks macros (without the page template)
• without using Nunjucks
• using the Prototype Kit

Add the brand refresh assets to your project

GOV.UK Frontend provides updated assets for the icons, Open Graph image and manifest.json to reflect the refreshed brand. These assets are available in the dist/govuk/assets/rebrand folder of the package.

If you serve the assets from the GOV.UK Frontend assets folder, make sure the assets inside the dist/govuk/assets/rebrand folder are served correctly at <YOUR-SITE-URL>/assets/rebrand.

If you copy the font and image files into your application, you’ll need to copy the dist/govuk/assets/rebrand folder to <YOUR-APP>/assets/rebrand. If you use an automated task to copy the files, you may need to update your task to automatically copy our new folder.

Use the refreshed GOV.UK brand if you're using our Nunjucks page template

If you can edit your Nunjucks environment, you can add a govukRebrand global value to your environment, with a value of true. This global value makes the affected components use new styles for the brand refresh and display updated assets (such as the refreshed logo in the GOV.UK header component and the crown in the GOV.UK footer component).

nunjucksEnv.addGlobal('govukRebrand', true)

If you cannot edit your Nunjucks environment, you can use our new govukRebrand 'variable' option from our page template, which makes:

• the Service navigation and Cookie banner components use new styles for the brand refresh
• the GOV.UK header and GOV.UK footer components rendered in the header and footer blocks display updated assets (such as the refreshed logo in the GOV.UK header component and the crown in the GOV.UK footer component)

If you’ve overridden the header or footer block, see the next sections to make sure your header or footer displays the updated assets.

Use set to assign the govukRebrand variable a value of true and enable the new styles:

{% set govukRebrand = true %}

Do not place this snippet between any block and endblock lines. Place it on a separate line.

If you’ve previously customised the template's assetPath, assetUrl or opengraphImageUrl options, you may need to update these to point to the location of the updated icons, Open Graph image and manifest.json.

Use the refreshed GOV.UK brand if you're using Nunjucks macro (without the page template)

You can do this by adding the updated styles for these components:

• GOV.UK header
• GOV.UK footer
• Service navigation
• Cookie banner

Add the govuk-template--rebranded class to the <html> element of your page to apply the updated styles to all affected components.

Enable the refreshed GOV.UK logo by adding rebrand: true to the GOV.UK header component configuration.

{{ govukHeader({
  rebrand: true
}) }}

Enable the GOV.UK crown in the GOV.UK footer component by addingrebrand: true to the component configuration.

{{ govukFooter({
  rebrand: true
}) }}

Update the links to the assets. Change the HTML inside your <head> element to use the new file locations (from /assets/ to /assets/rebrand/) and theme-color. Replace any existing definitions.

<meta name="theme-color" content="#1d70b8">
<link rel="icon" sizes="48x48" href="/assets/rebrand/images/favicon.ico">
<link rel="icon" sizes="any" href="/assets/rebrand/images/favicon.svg" type="image/svg+xml">
<link rel="mask-icon" href="/assets/rebrand/images/govuk-icon-mask.svg" color="#1d70b8">
<link rel="apple-touch-icon" href="/assets/rebrand/images/govuk-icon-180.png">
<link rel="manifest" href="/assets/rebrand/manifest.json">
<meta property="og:image" content="<SERVICE URL>/assets/rebrand/images/govuk-opengraph-image.png">

Use the refreshed GOV.UK brand if you're not using Nunjucks

You also can use the refreshed GOV.UK brand if you’re not using Nunjucks.

Start by adding the govuk-template--rebranded class to the <html> element of your page to apply the updated styles to all affected components.

As you make changes, use the examples on our website to check your updates:

• GOV.UK header
• GOV.UK footer
• Service navigation
• Cookie banner

Replace the <svg> element in your header with the following SVG code to display the refreshed GOV.UK logo:

<svg
  xmlns="http://www.w3.org/2000/svg"
  focusable="false"
  role="img"
  viewBox="0 0 324 60"
  height="30"
  width="162"
  fill="currentcolor"
  class="govuk-header__logotype"
  aria-label="GOV.UK">
  <title>GOV.UK</title>
  <g>
    <circle cx="20" cy="17.6" r="3.7"></circle>
    <circle cx="10.2" cy="23.5" r="3.7"></circle>
    <circle cx="3.7" cy="33.2" r="3.7"></circle>
    <circle cx="31.7" cy="30.6" r="3.7"></circle>
    <circle cx="43.3" cy="17.6" r="3.7"></circle>
    <circle cx="53.2" cy="23.5" r="3.7"></circle>
    <circle cx="59.7" cy="33.2" r="3.7"></circle>
    <circle cx="31.7" cy="30.6" r="3.7"></circle>
    <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"></path>
  </g>
  <circle class="govuk-logo-dot" cx="227" cy="36" r="7.3"></circle>
  <path d="M94.7,36.1c0,1.9.2,3.6.7,5.4.5,1.7,1.2,3.2,2.1,4.5.9,1.3,2.2,2.4,3.6,3.2,1.5.8,3.2,1.2,5.3,1.2s3.6-.3,4.9-.9c1.3-.6,2.3-1.4,3.1-2.3.8-.9,1.3-2,1.6-3,.3-1.1.5-2.1.5-3v-.4h-11v-6.6h19.5v24h-7.7v-5.4c-.5.8-1.2,1.6-2,2.3-.8.7-1.7,1.3-2.7,1.8-1,.5-2.1.9-3.3,1.2-1.2.3-2.5.4-3.8.4-3.2,0-6-.6-8.4-1.7-2.5-1.1-4.5-2.7-6.2-4.7-1.7-2-3-4.4-3.8-7.1-.9-2.7-1.3-5.6-1.3-8.7s.5-6,1.5-8.7,2.4-5.1,4.2-7.1c1.8-2,4-3.6,6.5-4.7s5.4-1.7,8.6-1.7,4,.2,5.9.7c1.8.5,3.5,1.1,5.1,2,1.5.9,2.9,1.9,4,3.2,1.2,1.2,2.1,2.6,2.8,4.1l-7.7,4.3c-.5-.9-1-1.8-1.6-2.6-.6-.8-1.3-1.5-2.2-2.1-.8-.6-1.7-1-2.8-1.4-1-.3-2.2-.5-3.5-.5-2,0-3.8.4-5.3,1.2s-2.7,1.9-3.6,3.2c-.9,1.3-1.7,2.8-2.1,4.6s-.7,3.5-.7,5.3v.3h0ZM152.9,13.7c3.2,0,6.1.6,8.7,1.7,2.6,1.2,4.7,2.7,6.5,4.7,1.8,2,3.1,4.4,4.1,7.1s1.4,5.6,1.4,8.7-.5,6-1.4,8.7c-.9,2.7-2.3,5.1-4.1,7.1s-4,3.6-6.5,4.7c-2.6,1.1-5.5,1.7-8.7,1.7s-6.1-.6-8.7-1.7c-2.6-1.1-4.7-2.7-6.5-4.7-1.8...