Pictograms have extra padding

What package(s) are you using?

• carbon-pictograms

Detailed description

Describe in detail the issue you’re having.

The pictograms have a much larger padding around them than expected from the specs on the IDL documentation Example of SVG

Expected padding

The extra padding is causing alignment issues between the pictograms and text because the artwork doesn’t span to the edge of the container as it did before. Design intent using 1px border specs

What is happening using svg from pictogram package link to storybook

Is this issue related to a specific component?

All pictogram svg files

What did you expect to happen? What happened instead? What would you like to see changed?

Is the extra padding around the pictograms an intended, permanent change to the pictogram svgs that designers need to account for?

I would have thought the pictograms would adhere to the size they were drawn to, accounting for the 1px padding specified on the IDL page

What browser are you working in?

All browsers

What version of the Carbon Design System are you using?

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Digital Design System and Web simplification – launching May 2020

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Please create a reduced test case in CodeSandbox

• Style and vanilla JS: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/components/examples/codesandbox
• React: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox

Additional information

• Screenshots or code
• Notes

[conradennis]

Russ to set up a meeting between Brand team and Carbon to discuss how to deal with this issue.

[conradennis]

@laurenmrice thanks for the heads up, the repo is still private and is mostly intended for artwork creation and contribution so it might be worth keeping this one here.

@oliviaflory thanks for calling attention to this issue. The extra padding around the pictogram is intentional and is actually the corresponding container size for the pictograms as in the image shown below.

While the intent is to include this extra space for container shapes in the SVG file for ease of use, it seems like the inclusion of the container space is causing issues with alignment when a container is not needed. I’m not sure how we might address this issue in code but it’s something I can bring up with the production team on the brand side and it’ll be good to get some perspective from the Carbon folks on how we can avoid this issue moving forward.