Shoelace
The Shoelace icon represents Shoelace, a library of UI components designed to simplify the process of building user interfaces for web applications.
Add shadcn.io to your AI agent. · Pro It installs Shoelace, or any of 294k icons, from a prompt, with Pro.
Set up MCPExports at 24 × 24 px
495 in Font Awesome 6 BrandsCC BY 4.0 license (opens in a new tab)Free to copy and download
Code
Shoelace in your framework
In any framework. Customize it above, and the code follows.
export const ShoelaceIcon = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512" {...props}>
<path fill="currentColor" d="M404.9 331c2.2-1.1 4.4-2.3 6.5-3.7l8.3-4.8c1.5-1.1 4.4-3.4 8.7-6.7l.5-.5c3.4-3.4 7.2-5 11.3-4.9c1.8 0 3.9.5 6.4 1.5l31-27.5c.9-.7 1.7-1.3 2.6-1.8h.2c3.3-1.9 6-1.8 8.2.4c3.9 2.1 4.2 5.6.9 10.6L456.9 322c.2.5.4 1 .4 1.5c.5 2.2.3 4.4-.5 6.6c-.7 1.5-1.8 2.9-3.1 4.2c-1.4 1.4-2.7 2.8-4.2 4.2l-18.8 13.7q-2.55 1.8-5.1 3.3q-3.15 1.95-6.6 3.6c-1 .4-1.9.9-2.9 1.3c-5.9 2.5-11.9 4.2-18.2 5c-2.9 24.5-11.3 47.1-25.1 67.8c-17.5 25.7-41.4 45.4-71.8 58.8c-30.2 13.5-63 20.2-98.2 20.2c-48.6-.5-88-11.4-118.2-32.8c-35.1-25-52.6-57.9-52.6-99.1v-5.6c1.2-28.1 9.5-54.6 24.8-79.8c15.1-24.9 37.1-41.7 66.1-50.5q22.35-6.6 45-6.6c15.5 0 31.6 2.9 48.1 8.6s35.2 15.5 55.9 29.5l54.1 36.3c15.1 9.8 28.8 16.5 41.2 20q-3.9-37.65-27.3-64.5c-15.7-18.1-35.6-31.3-59.9-39.7l-23.3-8q-32.1-11.25-47.7-22.2c-28.2-19.1-43.8-45.2-47-78.5l-.5-9.8c0-32.1 13-58.9 39-80.5c23-19.3 50.6-29 82.5-29c24 0 45.6 6.9 64.7 20.8c19.2 14 30.1 33.8 32.6 59.4l.5 10q0 27.9-14.4 47.7c-9.8 13.2-18.5 19.9-26 19.9q-2.4-.15-4.5-.6l-34 32c-5.5 3-9.2 2.5-11.1-1.6c-1.9-2.2-1.8-4.9.5-8.2l.2-.2c.5-.7 1.2-1.5 2-2.4l31.6-30q-.6-2.25-.6-4.8c0-4.1 1.6-7.6 4.9-10.4c13.8-12.4 20.8-26.7 20.8-42.8c0-16-6.1-29.5-18.2-40.4s-28.7-16.5-49.7-16.8c-26.2 0-47.8 7.9-64.7 23.7s-25.3 34.6-25.3 56.7c0 17.8 6.9 33.9 20.6 48.3c13.6 14.2 34.6 25.4 63 33.5c39.8 11.5 70.2 31 91.3 58.3c18.7 24.2 29.1 51.3 31.3 81.4c2.2-.7 4.3-1.5 6.5-2.6zM294.1 178.7c0 1.1.6 1.6 1.8 1.6c.1 0 9.7-8.9 28.8-26.6c0-2.4-5.1.9-15.3 10c-10.2 9.2-15.3 14.2-15.3 14.9zm8 6.4q0-1.5-1.5-1.5c-1.1 0-2.1.5-2.9 1.6c-1.9-.1-3.3.1-4.2.7c-.4.2-.5.5-.5.7c0 .7.5 1.3 1.5 1.6h3.3c2.9-1.1 4.4-2.2 4.4-3.3zm22.6-19.9c0-2.8-1.6-2.8-4.9 0c-1.6 1.5-3.6 3.5-6 6.2c-.8.6-2.6 2.2-5.3 4.9c-2.8 2.9-4.2 4.7-4.2 5.3l.2 1.3c.7.2 1.2.4 1.5.4c.1 0 3.3-2.9 9.5-8.7s9.3-8.9 9.3-9.3zm159.7 120l-30.6 27c1.8 1 3.2 2.4 4 4.2l30.2-27c.2-1.2.1-2.2-.5-2.9c-.6-.5-1.6-.9-3.1-1.3m-1.6-.9l-.7-.7l-27 21.9l1.6 2l26-23.1zm-116.2 79.6q-12-3.15-22.2-7.5q-22.95-9.3-57-32.4L250 298.7c-15.8-10.1-30.2-17.6-43.2-22.6c-13.1-4.9-26-7.3-38.6-7.3h-5.5c-32.2 1.7-57.2 13.8-75 36.2c-16.6 20.8-25 45.3-25 73.6c0 31.8 12.8 56.7 38.2 74.7c25.4 18.1 60.2 27.1 104.4 27.1c34.7 0 64-6.2 87.8-18.6q35.55-18.6 55.2-49.2c9.8-15.5 15.9-31.8 18.2-48.8z"/>
</svg>
);Other libraries
Shoelace in 1 more libraries
Each library draws it its own way. Open one to compare.
Font Awesome 6 Brands
More like it
Icons that share its tags, in the same style.
Search Font Awesome 6 Brands
Skip the copy and paste. With Pro, your AI agent finds and installs any Font Awesome 6 Brands icon from a prompt.
Get ProTags
Browse by tag
Shoelace is tagged UI, interface, design and 3 more. Related tags follow; each opens its icons from every library.
Pricing
Font Awesome 6 Brands MCP, with Pro
Ask for Shoelace or any of 495 Font Awesome 6 Brands icons and your agent installs it. The MCP comes with every Pro plan, with 6,000+ blocks and 14 premium templates. The icons stay free.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
Billing
Billed once a year in USD. Cancel anytime.
- How many people can use the license.
- Client work, SaaS products and anything you charge for.
- Production-ready React sections: hero, pricing, features, dashboards and more.
- Complete multi-page sites you can ship as they are.
- React icons from every major library, installable with one command.
- Presets that restyle every block, in light and dark.
- Lets your AI editor search, preview and install blocks for you.
- Priority requests are answered first.
Individual
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
- Seats: 1 seat
- Commercial use: Personal & open source only
- Pro blocks: 6,000+ blocks
- Templates: All 14 templates
- React icons: 294k+ icons
- Themes: All 59 themes
- MCP server: Basic usage
- Support: Standard
Team
Most popularFor freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
- Seats: Up to 5 seats
- Commercial use: Included
- Pro blocks: 6,000+ blocks
- Templates: All 14 templates
- React icons: 294k+ icons
- Themes: All 59 themes
- MCP server: High usage
- Support: Priority
Organization
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
- Seats: Unlimited seats
- Commercial use: Included
- Pro blocks: 6,000+ blocks
- Templates: All 14 templates
- React icons: 294k+ icons
- Themes: All 59 themes
- MCP server: Unlimited usage
- Support: Priority
Billed once a year in USD. Cancel anytime.
Individual
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
- How many people can use the license.Seats: 1 seat
- Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
- Production-ready React sections: hero, pricing, features, dashboards and more.Pro blocks: 6,000+ blocks
- Complete multi-page sites you can ship as they are.Templates: All 14 templates
- React icons from every major library, installable with one command.React icons: 294k+ icons
- Presets that restyle every block, in light and dark.Themes: All 59 themes
- Lets your AI editor search, preview and install blocks for you.MCP server: Basic usage
- Priority requests are answered first.Support: Standard
Team
Most popularFor freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
Everything in Individual, plus
- How many people can use the license.Seats: Up to 5 seats
- Client work, SaaS products and anything you charge for.Commercial use: Included
- Lets your AI editor search, preview and install blocks for you.MCP server: High usage
- Priority requests are answered first.Support: Priority
Organization
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
Everything in Team, plus
- How many people can use the license.Seats: Unlimited seats
- Lets your AI editor search, preview and install blocks for you.MCP server: Unlimited usage
- Secure checkout via Stripe
- Code lives in your repo
- Keep what you've shipped if you cancel
- License terms
FAQ
Frequently asked questions
What the Shoelace icon means and where it's used, then how to install, style and license it.
Install Shoelace from a prompt
MCP, 6,000+ blocks and 14 premium templates in every Pro plan. The icons stay free.