From 9f32a5376d70746ab126475e41976db74b1cae32 Mon Sep 17 00:00:00 2001
From: Alex Nault <nault.alex@gmail.com>
Date: Tue, 18 Jan 2022 19:51:10 -0500
Subject: [PATCH] docs: Change badges look (#19)

---
 README.md | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 0ce4560..9acb181 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,21 @@
 ![React Headings Logo](https://github.com/alexnault/react-headings/raw/master/assets/react-headings.png)
 
-# React Headings ![checks](https://img.shields.io/github/workflow/status/alexnault/react-headings/ci-and-publish?style=flat-square) ![version](https://img.shields.io/npm/v/react-headings?style=flat-square) ![size](https://img.shields.io/bundlephobia/minzip/react-headings?style=flat-square) ![downloads](https://img.shields.io/npm/dm/react-headings?style=flat-square)
+# React Headings
+
+<p>
+  <a aria-label="Build check" href="https://github.com/alexnault/react-headings/actions">
+    <img alt="" src="https://img.shields.io/github/workflow/status/alexnault/react-headings/ci-and-publish?style=for-the-badge">
+  </a>
+  <a aria-label="NPM version" href="https://www.npmjs.com/package/react-headings">
+    <img alt="" src="https://img.shields.io/npm/v/react-headings?style=for-the-badge">
+  </a>
+  <a aria-label="Size" href="https://bundlephobia.com/package/react-headings">
+    <img alt="" src="https://img.shields.io/bundlephobia/minzip/react-headings?style=for-the-badge">
+  </a>
+  <a aria-label="Monthly downloads" href="https://www.npmjs.com/package/react-headings">
+    <img alt="" src="https://img.shields.io/npm/dm/react-headings?style=for-the-badge">
+  </a>
+</p>
 
 > Never worry about using the wrong heading level (`h1`, `h2`, etc.) in complex React apps!