Markdown Clickable Image
How to make a clickable image in markdown by combining image and link syntax. Badge links, banner links, and logo links.
What is markdown clickable image?
Markdown has no dedicated syntax for clickable images, but you can achieve it by nesting image syntax inside link syntax: [](link-url). The image becomes the visual element of the link. This technique is widely used for badges, logo links, and banner images.
Syntax
Clickable image
Nest the image syntax inside a link. The ! and image come first, wrapped in the link's [ ].
Badge link (shields.io)
Common pattern for README badges — image is the badge, link goes to the package page.
Platform support
| Platform | Supported | Notes |
|---|---|---|
| GitHub | Yes | — |
| GitLab | Yes | — |
| Obsidian | Yes | — |
| Discord | No | Images and links render separately |
| Notion | Yes | — |
| Slack | No | — |
Common mistakes
[image.png](https://example.com)
[](https://example.com)
Missing the ! before the opening bracket. Without !, it renders as a regular text link, not an image link.
Tips for clickable image
Screen readers read the alt text aloud — "badge" tells users nothing. Write what the image shows: "npm version badge showing 1.0.0".
Frequently asked questions
Everything you need to know.
How do I make a clickable image in markdown?
Combine image and link syntax: [](link-url). The [](/...) pattern nests the image inside the link.
Related elements
Image
Images in markdown use the same syntax as links but with an exclamation mark prefix: . The alt text describes the image for screen readers and when the image fails to load.
Link
Links in markdown use square brackets for the display text and parentheses for the URL: [text](url). You can also add hover titles, use reference-style links for cleaner source, and auto-link bare URLs on most platforms.
Reference Link
Reference-style links separate the link text from the URL by using a label. The link text uses [text][label] and the URL is defined elsewhere with [label]: url. This keeps long URLs out of the flow of prose, making the source markdown easier to read and maintain.
Try it in the editor
Paste your markdown and see clickable image rendered instantly with professional themes.