Shields.io

https://shields.io/docs/
Admin
Shields.io is a service that provides concise, consistent, and legible badges for continuous...
Tokens:3,583
Snippets:5
Trust Score:10
Update:1 year ago
Show doc for...
Tokens:
Raw
### Create Static Shields.io Badges

Source: https://shields.io/docs/static-badges

Demonstrates the creation of static badges using Shields.io by providing URL examples. These examples showcase different configurations for text, color, style, and logo inclusion.

```markdown
![any text you like](https://img.shields.io/badge/any%20text-you%20like-blue)
```

```markdown
![just the message](https://img.shields.io/badge/just%20the%20message-8A2BE2)
```

```markdown
!['for the badge' style](https://img.shields.io/badge/%27for%20the%20badge%27%20style-20B2AA?style=for-the-badge)
```

```markdown
![with a logo](https://img.shields.io/badge/with%20a%20logo-grey?style=for-the-badge&logo=javascript)
```

--------------------------------

### Static Badge API

Source: https://shields.io/docs/badges

Defines the API for generating static badges on Shields.io. It allows customization of label, message, and color through URL path parameters and offers query parameters for styling, logos, and linking.

```APIDOC
Static Badge API:

Endpoint:
https://img.shields.io/badge/<badgeContent>

URL Encoding Rules:
- Underscore `_` or `%20` maps to Space
- Double underscore `__` maps to Underscore `_`
- Double dash `--` maps to Dash `-`

Path Parameters:
- `badgeContent` (string, REQUIRED): Encodes the badge content, typically in the format `label-message-color` or `message-color`. Example: `build-passing-brightgreen`

Query Parameters:
- `style` (string): Specifies the badge style. Possible values: [`flat`, `flat-square`, `plastic`, `for-the-badge`, `social`]. Default: `flat`.
- `logo` (string): Icon slug from simple-icons. Example: `appveyor`.
- `logoColor` (string): Color of the logo. Supports hex, rgb, rgba, hsl, hsla, and CSS named colors. Example: `violet`.
- `logoSize` (string): Controls logo size. Use `auto` for adaptive resizing. Example: `auto`.
- `label` (string): Overrides the default left-hand-side text. URL-encoding is needed for spaces or special characters. Example: `healthiness`.
- `labelColor` (string): Background color of the left part. Supports hex, rgb, rgba, hsl, hsla, and CSS named colors. Example: `abcdef`.
- `color` (string): Background color of the right part. Supports hex, rgb, rgba, hsl, hsla, and CSS named colors. Example: `fedcba`.
- `cacheSeconds` (string): HTTP cache lifetime in seconds. Example: `3600`.
- `link` (string[]): Specifies what clicking on the badge should do. Works with `<object>` tags, not `<img>` or markup.

Examples:
- Label, message, and color: `https://img.shields.io/badge/any_text-you_like-blue`
- Message and color only: `https://img.shields.io/badge/just%20the%20message-8A2BE2`
- With logo and style: `https://img.shields.io/badge/build-passing-brightgreen?logo=appveyor&style=flat-square`
```

--------------------------------

### Using SimpleIcons with Shields.io Badges

Source: https://shields.io/docs/logos

Shields.io supports a wide range of logos from the SimpleIcons library. Icons are referenced using their unique slugs, which can be found on the SimpleIcons website or in their repository's slugs.md file. This allows for easy integration of brand logos into your badges.

```url
https://img.shields.io/npm/v/npm.svg?logo=nodedotjs
```

--------------------------------

### Custom Logos via Base64 Encoding for Shields.io Badges

Source: https://shields.io/docs/logos

You can use custom logos by base64 encoding them and passing them as a URL parameter. This is useful for proprietary or unique icons not available in standard libraries. The SVG data should be properly encoded to be rendered correctly within the badge URL.

```url
https://img.shields.io/badge/play-station-blue.svg?logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHdpZHRoPSI2MDAiIGhlaWdodD0iNjAwIj48cGF0aCBkPSJNMTI5IDExMWMtNTUgNC05MyA2Ni05MyA3OEwwIDM5OGMtMiA3MCAzNiA5MiA2OSA5MWgxYzc5IDAgODctNTcgMTMwLTEyOGgyMDFjNDMgNzEgNTAgMTI4IDEyOSAxMjhoMWMzMyAxIDcxLTIxIDY5LTkxbC0zNi0yMDljMC0xMi00MC03OC05OC03OGgtMTBjLTYzIDAtOTIgMzUtOTIgNDJIMjM2YzAtNy0yOS00Mi05Mi00MmgtMTV6IiBmaWxsPSIjZmZmIi8+PC9zdmc+
```

--------------------------------

### Customizing Logo Color in Shields.io Badges

Source: https://shields.io/docs/logos

The `logoColor` parameter allows you to set the color of SimpleIcons-based logos. It accepts various color formats including hex codes, RGB(A), HSL(A), and CSS named colors. This provides fine-grained control over the visual appearance of your badges.

```url
https://img.shields.io/badge/logo-javascript-blue?logo=javascript
```

```url
https://img.shields.io/badge/logo-javascript-blue?logo=javascript&logoColor=f5f5f5
```
Tokens:
Raw