Post
4300
π¨ 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.