Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add walmart icon #6269

Merged
merged 12 commits into from Aug 29, 2021
Merged

add walmart icon #6269

merged 12 commits into from Aug 29, 2021

Conversation

sachinraja
Copy link
Contributor

@sachinraja sachinraja commented Aug 12, 2021

walmart
Issue: closes #6253
Alexa rank: 95

Checklist

  • I updated the JSON data in _data/simple-icons.json
  • I optimized the icon with SVGO or SVGOMG
  • The SVG viewbox is 0 0 24 24

Description

I chose #0071CE as the hex value because I found the color here. They even call it "Walmart Blue." It also shows up a few places throughout their site (see https://walmart.com below the navbar for a similar color and https://corporate.walmart.com/ navbar for the exact color). This logo includes the registered trademark symbol as I found it in the logos used on their site.

@github-actions github-actions bot added the new icon Issues or pull requests for adding a new icon label Aug 12, 2021
@sachinraja
Copy link
Contributor Author

Not exactly sure how to fix this because when I remove the collinear segment m6.532 0, I get two more errors:

icon-size Size of <path> must be exactly 24 in one dimension; the size is currently 26.446 x 5.656
icon-centered <path> must be centered at (12, 12); the center is currently (10.777, 12)

@jorgeamadosoria
Copy link
Contributor

Not exactly sure how to fix this because when I remove the collinear segment m6.532 0, I get two more errors:

icon-size Size of <path> must be exactly 24 in one dimension; the size is currently 26.446 x 5.656
icon-centered <path> must be centered at (12, 12); the center is currently (10.777, 12)

that's fixable on inkscape, I've run into that a couple times.
However when I remove the collinear that's not what I, I just get the icon scrambled. Can you provide the svg code after removing the segment so I can adjust it on inkscape?

@sachinraja
Copy link
Contributor Author

I also get the icon scrambled

@jorgeamadosoria
Copy link
Contributor

I also get the icon scrambled

ok, we are on the same page then

@sachinraja
Copy link
Contributor Author

Updated icon according to #6272 (comment)
walmart

@jorgeamadosoria The problem was the attributes on the XML document (like stroke-width). I had to go to the XML Editor and remove them.

@jorgeamadosoria
Copy link
Contributor

Updated icon according to #6272 (comment)
walmart

@jorgeamadosoria The problem was the attributes on the XML document (like stroke-width). I had to go to the XML Editor and remove them.

oh. I had just solved it by moving around the letters:
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Walmart</title><path d="M23.747 13.517h.027c.03 0 .057-.01.057-.036 0-.021-.013-.036-.053-.036l-.031.003zm0 .124h-.041v-.221a.421.421 0 0 1 .076-.007c.038 0 .056.007.07.017.014.01.023.027.023.047 0 .028-.02.045-.044.053v.003c.02.007.03.025.037.053.002.02.008.038.016.055h-.042a.152.152 0 0 1-.017-.058c-.005-.024-.02-.035-.052-.035h-.026zm.037-.29a.17.17 0 0 0-.169.174.17.17 0 0 0 .171.174c.096.002.166-.076.166-.173 0-.097-.07-.175-.167-.175zm.002-.037a.21.21 0 0 1 .214.21.211.211 0 0 1-.215.214c-.283 0-.283-.424 0-.424h.001m-3.686-.852c.067.115.062.244-.008.301l-1.216.853c-.127.073-.316-.016-.424-.202-.108-.186-.089-.395.037-.468l1.347-.626c.084-.032.199.028.265.142m1.6 0c.066-.114.18-.174.264-.142l1.347.626c.127.073.145.282.038.468-.108.186-.298.275-.424.202l-1.216-.853c-.07-.057-.075-.186-.009-.3m-.8.462c.132 0 .24.068.256.157l.13 1.48c0 .146-.17.266-.386.266s-.387-.12-.387-.266l.131-1.48c.015-.089.124-.157.256-.157m.8-1.387c.066.114.18.174.264.143l1.347-.627c.127-.073.145-.281.038-.468-.108-.186-.298-.274-.424-.201l-1.216.853c-.07.057-.075.186-.009.3m-1.6 0c.066-.114.06-.243-.01-.3l-1.215-.853c-.127-.073-.316.015-.424.201-.108.187-.089.395.037.468l1.347.627c.084.031.199-.029.265-.143m.8-.462c.132 0 .24-.068.256-.158l.13-1.48c0-.145-.17-.266-.386-.266s-.387.12-.387.267l.131 1.48c.015.089.124.157.256.157m-13.094.1v2.465h.67v-1.446c0-.067.007-.14.03-.201.056-.146.192-.316.408-.316.27 0 .397.228.397.558v1.405h.67v-1.463c0-.065.008-.143.027-.2a.423.423 0 0 1 .402-.3c.274 0 .406.224.406.612v1.351h.67V12.19c0-.766-.39-1.069-.828-1.069a.893.893 0 0 0-.487.134 1.038 1.038 0 0 0-.312.307h-.01a.703.703 0 0 0-.68-.44c-.417 0-.604.21-.718.39h-.01v-.335m6.035 .02v2.465h.688a32.817 32.817 0 0 1-.005-1.44c.175-.495.437-.426.762-.42v-.646a.723.723 0 0 0-.822.505v-.464h-.603m1.72-.817v2.422c0 .333.064.567.198.71.118.125.31.206.543.206.197 0 .39-.037.482-.072l-.009-.52c-.068.016-.146.03-.253.03-.227 0-.303-.146-.303-.445v-.927h.58v-.628h-.58v-.776h-.657m-8.72 2.585V10.36h-.667v3.282h.667v-.697m-1.777-.183c0 .045-.005.09-.017.133a.467.467 0 0 1-.45.315c-.184 0-.33-.104-.33-.326 0-.339.373-.432.797-.43zm.666-.59c0-.56-.239-1.05-1.045-1.05a1.91 1.91 0 0 0-.922.219l.13.45c.165-.104.426-.19.673-.19.41-.001.477.232.477.38v.036c-.893-.001-1.456.307-1.456.937 0 .384.287.744.786.744.307 0 .563-.123.717-.319h.015s.102.426.664.263a3.603 3.603 0 0 1-.04-.594v-.877M0 10.36s.583 2.387.676 2.775c.108.452.304.619.868.506l.364-1.48c.092-.368.154-.63.213-1.004h.01c.042.378.102.637.178 1.005 0 0 .148.672.223 1.025.077.353.288.575.84.454l.868-3.282h-.7l-.296 1.42c-.08.412-.152.735-.208 1.113h-.01c-.05-.374-.115-.684-.196-1.087l-.308-1.446h-.73l-.329 1.41c-.093.428-.18.774-.236 1.14h-.01c-.066-.4-.137-.797-.215-1.194L.737 10.36H0m13.23 2.401c0 .045-.005.09-.017.134a.467.467 0 0 1-.45.315c-.184 0-.331-.105-.331-.326 0-.339.373-.432.797-.43zm.665-.59c0-.558-.238-1.05-1.045-1.05a1.91 1.91 0 0 0-.922.22l.131.449a1.35 1.35 0 0 1 .673-.189c.409-.001.476.232.476.38v.036c-.892-.001-1.456.307-1.456.937 0 .384.287.744.786.744.307 0 .564-.123.718-.319h.015s.102.426.663.263c-.061-.496-.039-.953-.039-1.471"/></svg>

But great! let's go! :)

@jorgeamadosoria
Copy link
Contributor

jorgeamadosoria commented Aug 12, 2021

@sachinraja Reading #6272 , I think the hex @service-paradis suggested is not correct. The Spark brand guidelines seem to point strongly towards the yellow rather than the dark blue. I would recommend a second reading there to see what you think?
I also made this comment in response to @service-paradis comment in the issue.

@sachinraja
Copy link
Contributor Author

Yeah, the spark is definitely yellow. I'll wait for a confirmation though

@service-paradis
Copy link
Member

As seen in our guidelines, the color should be the brand color, it doesn't have to be in the logo itself.

@service-paradis
Copy link
Member

For the icon itself, I'm not so sure anymore if we should use the spark or the full wordmark 😅

The following sentence from their guidelines makes me rethink this one. We might get the help of other @simple-icons/maintainers on this one! Sorry @sachinraja!

The full Walmart logo represents our brand. We're proud to call ourselves Walmart, and the full logo should be used when materials are outside of the Walmart context.

@runxel
Copy link
Member

runxel commented Aug 12, 2021

Yeah, this really looks like we should include the wordmark, too.

For the icon itself, I'm not so sure anymore if we should use the spark or the full wordmark 😅

The following sentence from their guidelines makes me rethink this one. We might get the help of other @simple-icons/maintainers on this one! Sorry @sachinraja!

The full Walmart logo represents our brand. We're proud to call ourselves Walmart, and the full logo should be used when materials are outside of the Walmart context.

@sachinraja
Copy link
Contributor Author

@service-paradis I think this is a bit of a gray area because those aren't actually their brand guidelines, but an internal Walmart resource.

@jorgeamadosoria
Copy link
Contributor

As seen in our guidelines, the color should be the brand color, it doesn't have to be in the logo itself.

yellow is a brand color,though. It's one of five in the palette. And specifically it's the one recommended in their own page for use when using the spark.
A blue spark does not represent Walmart, neither popularly nor going by their own brand guidelines. Blue Walmart text, yes, Blue Walmart + spark, compromise, Blue spark... not so sure.

@jorgeamadosoria
Copy link
Contributor

jorgeamadosoria commented Aug 12, 2021

For the icon itself, I'm not so sure anymore if we should use the spark or the full wordmark 😅

The following sentence from their guidelines makes me rethink this one. We might get the help of other @simple-icons/maintainers on this one! Sorry @sachinraja!

The full Walmart logo represents our brand. We're proud to call ourselves Walmart, and the full logo should be used when materials are outside of the Walmart context.

If that' the case, then I've provided a SVG text for @sachinraja to validate if they choose to (it deals with the collinear problem they were having) and in that case then the hex is applicable, I think.

(I still like the spark better, tho.)

@service-paradis
Copy link
Member

service-paradis commented Aug 12, 2021

The hex we provide only serves as a 'guide' to end-users anyway, as the SVG is served without color (defaulting to the path being black), with the hex being available via the JSON. We aim to provide the primary brand color, whatever it fits the icon or not. In this case, yellow is not Walmart primary color whatever icon we choose.

Like you mention, we can wait for another @simple-icons/maintainers to weight in about the logo and the color.

@ericcornelissen
Copy link
Contributor

I must agree that I would have expected yellow as the brand color for Walmart, but the color palette shared by @sachinraja in the Pull Request description does strongly suggest that blue is the "correct" choice. To add to that, the spark in the bottom right of that file is in many different colors, further suggesting it doesn't have to be yellow. Also considering that the brand color != the color of the SVG I would agree that blue is indeed the correct choice here.

@jorgeamadosoria
Copy link
Contributor

jorgeamadosoria commented Aug 12, 2021

I must agree that I would have expected yellow as the brand color for Walmart, but the color palette shared by @sachinraja in the Pull Request description does strongly suggest that blue is the "correct" choice. To add to that, the spark in the bottom right of that file is in many different colors, further suggesting it doesn't have to be yellow. Also considering that the brand color != the color of the SVG I would agree that blue is indeed the correct choice here.

I remain unconvinced. The yellow is called Spark Yellow. It's kind of it's only reason of being there.
Also, the palette says "Color hierarchy, context of message, and media channel need to be considered when producing a piece of communication for the Associate Brand"
The idea is not that the colors are ranked in importance, but rather that when using this colors in context, they need to be considered in order.
An example of what I mean:
https://one.walmart.com/content/dam/px/associate_brand_center/all-company-brand-guidelines/AssociateBrand_VISID_200203.pdf

You would notice the use of the blue ink as a background color for Sections (to bring up the white), of Walmart blue for headers (as expected) and of the little yellow spark in each and every page.
It is my very firm opinion that the Walmart spark cannot be represented by any color other than the designated Spark Yellow. It is a color solely designed for it, it is used as such in Walmart's own brand related documentation, and I could not remember having ever seen a Walmart spark of any other color, except the one in the Palette @sachinraja linked, which reading further is called "an Associated Spark" and it's a wholly different brand asset with a different meaning (and it's meant to be multicolored).

Having said that, I have zero power of decision on this. As @service-paradis said, the hex is a suggestion, I can always use any other color when using the library, so it's not a deal breaker.
I just think #ffc220 is better than #041f41 if the icon is going to be the spark only.

I think I've have exhausted my arguments. I'll accept whatever the ultimately result turns out to be.

@sachinraja
Copy link
Contributor Author

sachinraja commented Aug 13, 2021

@ericcornelissen as outlined by @service-paradis do you think we should use the wordmark or just the spark here?

About the hex value, I'm a bit confused on why the brand color is suggested and not the actual logo color, though that may be a question better asked in a separate issue. If we're using the wordmark this won't matter anyway.

@ericcornelissen
Copy link
Contributor

do you think we should use the wordmark or just the spark here?

Based on the "Logo creation" tab of the Associate Brand Center (linked by @service-paradis) it seems to me that we should include the wordmark. By and large people that get the logo through simple icons will be using it "Out of context" 🤔

About the hex value, I'm a bit confused on why the brand color is suggested and not the actual logo color, though that may be a question better asked in a separate issue.

Primarily because that is what we have done for the other 1900+ icons. On top of that, as @service-paradis, already noted, the color is not embedded in the SVG, and not every user will use the brand color as the color for the SVG. For example, one could choose to embed the SVG in a button that has the brand color as background color. If you want to discuss in more depth I would indeed encourage you to open an issue, after looking for existing issues on the topic as this isn't the first time it has come up.

@sachinraja
Copy link
Contributor Author

Seems like three maintainers are in agreement here so I will revert to the wordmark. I still think "Walmart Blue" (see color palette) would be a better color to represent the brand. This may sound weird, but this is the color that I (and probably most people) think of when they think about Walmart. It is also the one used the most in their stores (on signs, on the storefronts, etc).

@jorgeamadosoria
Copy link
Contributor

jorgeamadosoria commented Aug 14, 2021

Seems like three maintainers are in agreement here so I will revert to the wordmark. I still think "Walmart Blue" (see color palette) would be a better color to represent the brand. This may sound weird, but this is the color that I (and probably most people) think of when they think about Walmart. It is also the one used the most in their stores (on signs, on the storefronts, etc).

if we are going with the wordmark in full, then I also think Walmart blue is in order rather than Blue Ink or Spark Yellow.

@ericcornelissen
Copy link
Contributor

Just to clarify, I agree blue is the best choice

@sachinraja
Copy link
Contributor Author

@jorgeamadosoria You don't have to keep this updated with the main branch. We only need to update if there is a merge conflict once the PR is ready to committed

@jorgeamadosoria
Copy link
Contributor

@jorgeamadosoria You don't have to keep this updated with the main branch. We only need to update if there is a merge conflict once the PR is ready to committed

I know, it's a mania :)
I think we are all in agreement, should we merge this already?

@sachinraja
Copy link
Contributor Author

sachinraja commented Aug 16, 2021

walmart (1)
Well this is mergeable now that I've updated this. I've changed the color to #0071CE as I feel this fits the Walmart brand more. Thanks to @jorgeamadosoria for providing the fixed path!

icons/walmart.svg Outdated Show resolved Hide resolved
_data/simple-icons.json Outdated Show resolved Hide resolved
@sachinraja
Copy link
Contributor Author

walmart
Here's the preview for latest version of the icon

Copy link
Contributor

@ericcornelissen ericcornelissen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The SVG and metadata look good now, can someone remind me why the trademark symbol is not included?

@ericcornelissen ericcornelissen added in discussion There is an ongoing discussion that should be finished before we can continue and removed changes requested labels Aug 29, 2021
@sachinraja
Copy link
Contributor Author

sachinraja commented Aug 29, 2021

@ericcornelissen Walmart does not seem to require it for out-of-context logos in their guidelines (in the "Logo creation" section). That link is a guide for internal communications becuase Walmart does not have a brand guideline page for outsiders.

@ericcornelissen ericcornelissen removed the in discussion There is an ongoing discussion that should be finished before we can continue label Aug 29, 2021
Copy link
Contributor

@ericcornelissen ericcornelissen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In that case, this looks good to me 👍 If it turns out we should include the trademark symbol after all we can update it later

@ericcornelissen ericcornelissen merged commit 67b1d56 into simple-icons:develop Aug 29, 2021
@sachinraja
Copy link
Contributor Author

Thank you @jorgeamadosoria for your work on this!

@sachinraja sachinraja deleted the walmart branch August 29, 2021 17:20
@dirien
Copy link
Member

dirien commented Aug 29, 2021

So cool @sachinraja! Love it!

ericcornelissen added a commit that referenced this pull request Sep 5, 2021
# New Icons

- Burger King (#4801)
- Guilded (#6448)
- Handlebars.js (#6468)
- iTerm2 (#6325)
- Walmart (#6269)

# Updated Icons

- Fnac (#6438)
- Furry Network (#6221)
- GraphQL (#6417)
- PCGamingWiki (#6224)
- TeamViewer (#6420)
- TypeScript (#6466)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
new icon Issues or pull requests for adding a new icon
Projects
None yet
Development

Successfully merging this pull request may close these issues.

add Walmart icon
6 participants