[docs] design iconography for different types of callouts

[marcysutton]

Similar to the discussion in #15616, we've talked about designing iconography to mark notes, warnings, and errors: things like a red lobster for an error/caution, an owl for an advanced tip, and a purple octopus for a note.

This issue will be satisfied when we have icons/illustrations to use in components. The goal should be to introduce a cohesive style that can be used throughout the docs, including for more editorial visual aids.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[marcysutton]

I've contacted four artists so far, I'll add more details here when I have them:

• https://burnttoastcreative.com/ (no answer)
• https://ummmheather.com/ (unavailable)
• https://www.behance.net/adamkoon
• https://www.behance.net/thunderockets

[gillkyle]

I think once this is finished it would be to nice to do a big sweep through the docs looking for all the permutations of notes and callouts we have and updating ones we can.

We pretty much have every possible permutation of this in the docs somewhere 😅:

> Note: Check out xyz... https://github.com/gatsbyjs/gatsby/blob/master/docs/contributing/blog-and-website-contributions.md#L67

**Note**: Check out xyz... https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/adding-tags-and-categories-to-blog-posts.md#L153

Note: Check out xyz... https://github.com/gatsbyjs/gatsby/blob/master/docs/contributing/blog-and-website-contributions.md#L15

> **Note**: Check out xyz... https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/mdx/programmatically-creating-pages.md#L25

> Check out xyz... https://github.com/gatsbyjs/gatsby/blob/master/docs/tutorial/part-three/index.md#L71

_**Note**: Check out xyz..._ https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/adding-app-and-website-functionality.md#L46

The link after the example is where it shows up somewhere. Would be nice to make this all a little more consistent with these callouts.

[sachdeva-shrey]

Hi! I'm a designer and I can help solve this issue. Where exactly shall these icons be used and what style of icons/illustration are you looking for? @marcysutton

[marcysutton]

An update: This is in progress now, as we have hired a contract illustrator. Once we have the artwork, we can close this issue and move to implementation of adding them to the docs.

[huyz]

Is there another update?