My profile README broke (force newline after each <img>)

[t1m013y]

🏷️ Discussion Type

Question

💬 Feature/Topic Area

Profile

Body

When I created my GitHub profile README (click link to see), all icons were in a single row. Some time ago something happened and almost all icons began to display each from new line, and I have no idea why.

I noticed that most of broken images are loaded from cdn.simpleicons.org, and some of them which are loaded from my repository directly, not from simpleicons, are displayed correctly.

Can someone explain why they were displayed correctly earlier but now they're displayed incorrectly and how can I fix this?

[t1m013y]

I tried adding style="display:inline;" or wrapping group of images in single <span>, but none from this helped.

Also I looked at page code using DevTools, and I saw that display: block is added automatically to these images. When I look at SVG source from simpleicons (for example, https://cdn.simpleicons.org/python/3776AB), I see no reason in it to have force line-break after it or display:block.

Looks like downloading images directly to the repository is the simplest solution, so I'll make it soon to fix the profile page.

[ankan00V]

This usually isn’t your Markdown “randomly breaking” — it’s almost always related to how the images are being served and rendered.

From what you described, the key clue is that icons from cdn.simpleicons.org are the ones breaking into new lines, while the ones hosted in your own repository still display correctly.

What likely changed is how those external SVGs are being delivered or interpreted by GitHub’s Markdown renderer. If the CDN started serving SVGs with slightly different headers, dimensions, or inline styles (like display: block instead of inline), GitHub will render each image as a block element — which forces them onto separate lines.

Why it worked before:
Earlier, those SVGs were probably treated as inline elements (or had implicit sizing), so they naturally sat next to each other in one row.

Why it’s breaking now:
Now they’re likely being interpreted as block-level elements or without proper sizing, so each one takes a full line.

How to fix it:

1. Force inline display using HTML instead of Markdown
   Markdown image syntax doesn’t give you control over layout, but HTML does.

Example:

Using height (or width) is important — it keeps them visually aligned.

2. Add spacing manually
   You can add a small margin if needed:
   style="display:inline-block; margin-right: 6px;"

3. Avoid relying on external CDN behavior
   Since your locally hosted icons are working fine, a more stable fix is:

• Download the icons
• Store them in your repo
• Reference them locally

4. Wrap icons in a single line container
   You can also group them:

This helps enforce inline rendering.

In short: nothing “broke” in your README directly — the external CDN behavior likely changed, and GitHub is now rendering those SVGs as block elements. Switching to HTML with explicit sizing/display or hosting icons locally will fix it reliably.

[ranjiGT]

The issue comes from how GitHub renders external SVG images (like those from cdn.simpleicons.org). They can sometimes be treated as block elements, which causes each icon to appear on a new line.

In your README, you’re also using   for spacing, which isn’t always handled consistently by GitHub’s Markdown renderer.

---

✅ Fix

Wrap each group of icons in an HTML container (like <p>) and remove  . You already have width/height, so just enforce inline layout.

---

🔧 Example (fixed Languages section)

<p>
<a href="https://www.python.org/"><img src="https://cdn.simpleicons.org/python/3776AB" width="32" height="32" /></a>
<a href="https://en.wikipedia.org/wiki/C_%28programming_language%29"><img src="https://cdn.simpleicons.org/c/A8B9CC" width="32" height="32" /></a>
<a href="https://en.wikipedia.org/wiki/C%2B%2B"><img src="https://cdn.simpleicons.org/cplusplus/00599C" width="32" height="32" /></a>
<a href="https://en.wikipedia.org/wiki/JavaScript"><img src="https://cdn.simpleicons.org/javascript/F7DF1E" width="32" height="32" /></a>
<a href="https://nodejs.org/en"><img src="https://cdn.simpleicons.org/nodedotjs/5FA04E" width="32" height="32" /></a>
<a href="https://www.nasm.us/"><img src="icons/nasm.svg" width="32" height="32" /></a>
<a href="https://www.php.net/"><img src="https://cdn.simpleicons.org/php/777BB4" width="32" height="32" /></a>
<a href="https://en.wikipedia.org/wiki/C_Sharp_(programming_language)"><img src="https://upload.wikimedia.org/wikipedia/commons/b/bd/Logo_C_sharp.svg" width="32" height="32" /></a>
</p>

---

🔁 Apply this to all sections

Do the same for:

• Web libraries and frameworks
• Tools and software
• Embedded
• Information security
• Other languages

---

💡 Optional (better spacing)

Instead of  , use:

<img src="..." height="32" style="margin-right: 8px;">

---

🧠 Summary

• Problem: SVG icons from CDN + Markdown spacing → forced line breaks
• Fix: Use HTML containers (<p>) + remove  
• Result: Icons render inline again consistently

---

This keeps your current design but makes it stable against GitHub rendering changes.

[Sanmeet007]

Hmm this is not working !

[henri]

+1

[furrysachin]

This isn’t a problem with your README — it’s due to a change in how GitHub renders images from cdn.simpleicons.org.

GitHub proxies external images through its Camo service, and it seems SVGs from that CDN are now being treated as block elements (display: block). Because of that, each is forced onto a new line.

That’s why:

1. Icons hosted in your repo still work fine
   2.Icons from cdn.simpleicons.org break into new lines

2. display:inline or doesn’t fix it (GitHub overrides it)
   Fixes

3. Use jsDelivr (recommended)
   https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/python.svg

4. Use shields.io badges
   

5. Host icons locally in your repo (most stable)

Summary: It worked earlier because those SVGs were rendered inline. Now GitHub treats them as block elements from that CDN, so switching the source or hosting locally is the only reliable fix.

[AstroJr0]

The icons are breaking into new lines because the SimpleIcons CDN changed how it serves SVGs, causing GitHub to treat them as 'blocks' rather than 'inline' text.

🛠 The Fix

Wrap your icons in an HTML paragraph tag. This forces the browser to keep them together in one row.
Replace your current code with this structure:

<p align="left">
  <img src="https://cdn.simpleicons.org/python" width="30" />
  <img src="https://cdn.simpleicons.org/javascript" width="30" />
  <img src="https://cdn.simpleicons.org/react" width="30" />
</p>

• Honestly, I would recommend using shields.io or awesome-github-profile-readme

💡 Why this happened ? :(

• External Links: Icons from cdn.simpleicons.org are now missing the metadata that tells GitHub 'stay on the same line.'
• Local Links: Your local images work because GitHub serves repository files with standard 'inline' formatting by default.

[henri]

This fails for me.

[henri]

Anyone have some better suggestions. The only thing I have not tired so far are local links. Why is not not possible to just override this.. in the image tag? That seems like the easiest option. GitHub consider not clobbering this within the image tags. Happy to be told why this is a problem.

[henri]

Something else I noticed the behavior changes depending if you are logged in or not.

See two images below one (broken - line splits between images) not logged in and the other (fine - all images on single line) logged into GitHub.

[davidwarner234]

Likely a GitHub rendera ing change affecting external SVGs from cdn.simpleicons.org. Try hosting the icons directly in your repo or using raw GitHub URLs, and set consistent width/height on the tags to keep them in one row.