Skip to content

Use next icons internally in components#8185

Open
ggdouglas wants to merge 2 commits into
developfrom
gd/use-next-icons-in-components
Open

Use next icons internally in components#8185
ggdouglas wants to merge 2 commits into
developfrom
gd/use-next-icons-in-components

Conversation

@ggdouglas

@ggdouglas ggdouglas commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

Summary

Switches Blueprint's built-in components to render icons from @blueprintjs/icons/next instead of the legacy @blueprintjs/icons set. This is internal-only: no public API changes, and component props that accept icons continue to work as before. It moves the default visual language of the library onto the next-generation icon set introduced in #8174 / #8175.

Changes

Component icon imports are repointed from @blueprintjs/icons to @blueprintjs/icons/next, which also adopts the new *Icon export naming. Most swaps are one-to-one, but the next set renames several glyphs, so the mapping is not always nominal.

Non-mechanical changes

Two swaps go beyond a rename and are worth a closer look during review. In Dialog the close button drops its explicit IconSize.STANDARD and relies on the icon's default size. In EntityTitle the loading placeholder switches from the IconNames.SQUARE string identifier to a rendered <SquareIcon /> element.

Screenshots

Breadcrumbs

Before After
breadcrumbs-before breadcrumbs-after
breadcrumbs-diff

Callout

Before After
callout-before callout-after
callout-diff

Checkbox

Before After
checkbox-before checkbox-after
checkbox-diff

DatePicker

Before After
dp-before dp-after
dp-diff

Dialog

Before After
dialog-before dialog-after
dialog-diff

Drawer

Before After
drawer-before drawer-after
drawer-diff

NumericInput

Before After
ni-before ni-after
ni-diff

HTMLSelect

Before After
html-select-before html-select-after
html-select-diff

KeyComboTag

Before After
key-combo-before key-combo-after
key-combo-diff

MenuItem

Before After
menu-item-before menu-item-after
menu-item-diff

Omnibar

Before After
omnibar-before omnibar-after
omnibar-diff

Select

Before After
select-before select-after
select-diff

Tag / CompundTag

Before After
tag-before tag-after
tag-diff

Toast

Before After
toast-before toast-after
toast-diff

Tree

Before After
tree-before tree-after
tree-diff

TruncatedFormat

Before After
truncated-before truncated-after
truncated-diff

@blueprint-previews

Copy link
Copy Markdown

Use next icons internally in components

Build artifact links for this commit: documentation | landing | table | demo | storybook

This is an automated comment from the deploy-preview CircleCI job.

@blueprint-previews

Copy link
Copy Markdown

Update Callout test with new icon

Build artifact links for this commit: documentation | landing | table | demo | storybook

This is an automated comment from the deploy-preview CircleCI job.

Base automatically changed from gd/icons-next-static to develop June 26, 2026 18:32
@changelog-app

changelog-app Bot commented Jun 26, 2026

Copy link
Copy Markdown

Generate changelog in packages/core/changelog/@unreleased

Type (Select exactly one)

  • Feature (Adding new functionality)
  • Improvement (Improving existing functionality)
  • Fix (Fixing an issue with existing functionality)
  • Break (Creating a new major version by breaking public APIs)
  • Deprecation (Removing functionality in a non-breaking way)
  • Migration (Automatically moving data/functionality to a new system)

Description

Use next icons internally in components


Generate changelog in packages/datetime/changelog/@unreleased

Type (Select exactly one)

  • Feature (Adding new functionality)
  • Improvement (Improving existing functionality)
  • Fix (Fixing an issue with existing functionality)
  • Break (Creating a new major version by breaking public APIs)
  • Deprecation (Removing functionality in a non-breaking way)
  • Migration (Automatically moving data/functionality to a new system)

Description

Use next icons internally in components


Generate changelog in packages/icons/changelog/@unreleased

Type (Select exactly one)

  • Feature (Adding new functionality)
  • Improvement (Improving existing functionality)
  • Fix (Fixing an issue with existing functionality)
  • Break (Creating a new major version by breaking public APIs)
  • Deprecation (Removing functionality in a non-breaking way)
  • Migration (Automatically moving data/functionality to a new system)

Description

Use next icons internally in components


Generate changelog in packages/select/changelog/@unreleased

Type (Select exactly one)

  • Feature (Adding new functionality)
  • Improvement (Improving existing functionality)
  • Fix (Fixing an issue with existing functionality)
  • Break (Creating a new major version by breaking public APIs)
  • Deprecation (Removing functionality in a non-breaking way)
  • Migration (Automatically moving data/functionality to a new system)

Description

Use next icons internally in components


Generate changelog in packages/table/changelog/@unreleased

Type (Select exactly one)

  • Feature (Adding new functionality)
  • Improvement (Improving existing functionality)
  • Fix (Fixing an issue with existing functionality)
  • Break (Creating a new major version by breaking public APIs)
  • Deprecation (Removing functionality in a non-breaking way)
  • Migration (Automatically moving data/functionality to a new system)

Description

Use next icons internally in components


Check the box to generate changelog(s)

  • Generate changelog entry

@ggdouglas
ggdouglas force-pushed the gd/use-next-icons-in-components branch from 1ade755 to c27f1d7 Compare June 26, 2026 18:56
@blueprint-previews

Copy link
Copy Markdown

Update Callout test with new icon

Build artifact links for this commit: documentation | landing | table | demo | storybook

This is an automated comment from the deploy-preview CircleCI job.

@changelog-app

changelog-app Bot commented Jun 26, 2026

Copy link
Copy Markdown

Successfully generated changelog entries for:

  • packages/core/changelog
  • packages/datetime/changelog
  • packages/icons/changelog
  • packages/select/changelog
  • packages/table/changelog

Need to regenerate?

Simply interact with the changelog bot comment again to regenerate these entries.


📋Changelog Preview

💡 Improvements

  • Use next icons internally in components (#8185)
  • Use next icons internally in components (#8185)
  • Use next icons internally in components (#8185)
  • Use next icons internally in components (#8185)
  • Use next icons internally in components (#8185)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant