Icons: Static vs Dynamic Icons Render Differently

[ggdouglas]

Description

Static icon components (e.g., <Error />, <WarningSign />) appear visually different from their dynamic counterparts (e.g., <Icon icon="error" />). Most notably, static icons get clipped/cut off around the edges, while dynamic icons render as expected.

This is especially noticeable in components like Callout which use the static versions of icons as the default for intents.

Technical Details

Static Icon Components (Current Implementation)

Static icon components use a complex coordinate system with scaling transforms:

// Example from packages/icons/lib/esm/generated/components/error.js
const translation = `${(-1 * pixelGridSize) / 0.05 / 2}`;
return (
    <SVGIconContainer {...props}>
        <path
            d="M159.8 320.2C71.4 320.2 -0.2 248.6 -0.2 160.2S71.4 0.2 159.8 0.2..."
            transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
        />
    </SVGIconContainer>
);

Dynamic Icon Components (Working as Expected)

Dynamic icons use path data that closely matches the original SVG coordinates:

// Example from packages/icons/lib/esm/generated/16px/paths/error.js
export default ["M7.99-.01c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm1 13h-2v-2h2v2zm0-3h-2v-7h2v7z"];

// Compare to original SVG (resources/icons/16px/error.svg):
// d="M7.99-0.01c-4.42,0-8,3.58-8,8s3.58,8,8,8s8-3.58,8-8S12.41-0.01,7.99-0.01z
//    M8.99,12.99h-2v-2h2V12.99z M8.99,9.99h-2v-7h2V9.99z"

// Both rendered through SVGIconContainer in standard viewBox="0 0 16 16" without transforms

Code Sandbox

https://codesandbox.io/p/sandbox/lqlph3

https://codesandbox.io/p/sandbox/c5yz8w

Reproduction

Compare these two approaches for rendering the same icon:

// Static component (complex transforms)
import { Error } from "@blueprintjs/icons";
<Error size={16} />;

// Dynamic component (simple coordinates)
import { Icon } from "@blueprintjs/core";
<Icon icon="error" size={16} />;

The visual output should be identical, but the underlying rendering approaches are fundamentally different.

Environment

• Package version(s): 6.2.1
• Operating System: macOS 15.6.1
• Browser name and version: Chrome 139.0.7258.155