Post
4151
ðĻ BadgeCraft: Create Beautiful Badges with Ease! âĻ
Hello there! Today I'm introducing BadgeCraft, a simple app that lets you create stunning badges for your websites, GitHub READMEs, and documentation.
ð Key Features
ðïļ 14 diverse color options including vibrant neon colors
ðĪ Custom text input for label and message
ðžïļ Support for 2000+ logos via Simple Icons
ð Clickable link integration
ðïļ Real-time preview
ðŧ Ready-to-use HTML code generation
ð How to Use
Label - Enter the text to display on the left side of the badge (e.g., "Discord", "Version", "Status")
Message - Enter the text to display on the right side of the badge
Logo - Type the name of a logo provided by Simple Icons (e.g., "discord", "github")
Style - Choose the shape of your badge (flat, plastic, for-the-badge, etc.)
Color Settings - Select background color, label background color, and logo color
Link - Enter the URL that the badge will link to when clicked
â Use Cases
Add social media links to your GitHub project README
Display version information or download links on your website
Include tech stack badges in blog posts
Show status indicators in documentation (e.g., "in development", "stable")
ðĄ Tips
Click on any of the prepared examples to automatically fill in all settings
Copy the generated HTML code and paste directly into your website or blog
HTML works in GitHub READMEs, but if you prefer markdown, use the  format
ðĻâðŧ Tech Stack
This app was built using Gradio and leverages the shields.io API to generate badges. Its simple UI makes it accessible for everyone!
ð openfree/Badge
âĻ Available under MIT License - feel free to use and modify.
Hello there! Today I'm introducing BadgeCraft, a simple app that lets you create stunning badges for your websites, GitHub READMEs, and documentation.
ð Key Features
ðïļ 14 diverse color options including vibrant neon colors
ðĪ Custom text input for label and message
ðžïļ Support for 2000+ logos via Simple Icons
ð Clickable link integration
ðïļ Real-time preview
ðŧ Ready-to-use HTML code generation
ð How to Use
Label - Enter the text to display on the left side of the badge (e.g., "Discord", "Version", "Status")
Message - Enter the text to display on the right side of the badge
Logo - Type the name of a logo provided by Simple Icons (e.g., "discord", "github")
Style - Choose the shape of your badge (flat, plastic, for-the-badge, etc.)
Color Settings - Select background color, label background color, and logo color
Link - Enter the URL that the badge will link to when clicked
â Use Cases
Add social media links to your GitHub project README
Display version information or download links on your website
Include tech stack badges in blog posts
Show status indicators in documentation (e.g., "in development", "stable")
ðĄ Tips
Click on any of the prepared examples to automatically fill in all settings
Copy the generated HTML code and paste directly into your website or blog
HTML works in GitHub READMEs, but if you prefer markdown, use the  format
ðĻâðŧ Tech Stack
This app was built using Gradio and leverages the shields.io API to generate badges. Its simple UI makes it accessible for everyone!
ð openfree/Badge
âĻ Available under MIT License - feel free to use and modify.