<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="pretty-atom-feed.xsl" type="text/xsl"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
  <title>Blog Awesome</title>
  <subtitle>News and information from Font Awesome – the internet’s favorite icon set; mixed with musings and nerdery from the team behind it.</subtitle>
  <link href="https://blog.fontawesome.com/feed/feed.xml" rel="self" />
  <link href="https://blog.fontawesome.com/" />
  <updated>2026-08-13T20:41:46Z</updated>
  <id>https://blog.fontawesome.com/</id>
  <author>
    <name>Font Awesome</name>
  </author>
  <entry>
    <title>Introducing: Build Awesome</title>
    <link href="https://blog.fontawesome.com/introducing-build-awesome-static-site-platform-kickstarter/" />
    <updated>2026-05-07T17:40:36Z</updated>
    <id>https://blog.fontawesome.com/introducing-build-awesome-static-site-platform-kickstarter/</id>
    <content type="html">&lt;blockquote&gt;
&lt;p&gt;I really love surprise parties. I’m just so frickin’ excited! &lt;/p&gt;
&lt;/blockquote&gt;
&lt;hr&gt;
&lt;p&gt;We’ve been holding something in for a long time. And well, to be honest, our tummies hurt just a little. &lt;strong&gt;TLDR&lt;/strong&gt;; Now you can help fund the &lt;a href=&quot;https://www.kickstarter.com/projects/fontawesome/build-awesome-pro?ref=6nknva&quot;&gt;Build Awesome Kickstarter!&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;To be honest, holding in this news was kinda like trying not to spoil a surprise party while the guest of honor keeps asking why there are balloons poking out of the closet. (We see you, Surprise Party Sue.)&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://www.kickstarter.com/projects/fontawesome/build-awesome?ref=cimyg7&quot;&gt;The&lt;/a&gt; &lt;a href=&quot;https://www.kickstarter.com/projects/fontawesome/build-awesome-pro?ref=6nknva&quot;&gt;Kickstarter&lt;/a&gt; is live, and you’re invited into the test kitchen. Back the project, nab all the goodies, and help us ship a better long-term recipe for building on the web.&lt;/p&gt;
&lt;h2 id=&quot;the-build-awesome-kickstarter-is-live&quot;&gt;The Build Awesome Kickstarter is Live!&lt;/h2&gt;
&lt;p&gt;&lt;video height=&quot;720&quot; style=&quot;aspect-ratio: 1280 / 720;&quot; width=&quot;1280&quot; autoplay=&quot;&quot; controls=&quot;&quot; loop=&quot;&quot; muted=&quot;&quot; src=&quot;https://blog.fontawesome.com/introducing-build-awesome-static-site-platform-kickstarter/clip-3-1-xNvJLTWLrBGS.mp4&quot; playsinline=&quot;&quot;&gt;&lt;/video&gt;&lt;/p&gt;
&lt;p&gt;Build Awesome is our answer to a problem every web person knows deep down in their bones: &lt;em&gt;while shipping websites is sometimes easy, the maintenance part is not.&lt;/em&gt;  &lt;/p&gt;
&lt;p&gt;Somewhere between launch day confetti and six months later, your build ends up requiring seventeen plugins and performing an ethically gray ritual, just to keep things running. Your site gets fragile. Bloated. Stale. The deploy pipeline starts looking like a kitchen that a group of kindergartners have been “cooking” in for the last week. Your utensil drawer has been replaced with a vague sense of dread, and your dry ingredients have been spilled all over the floor. &lt;/p&gt;
&lt;p&gt;So we sprung into action to do what we do best: we marched into the test kitchen and started rebuilding the recipe!&lt;/p&gt;
&lt;h2 id=&quot;the-problem-modern-web-stacks-feel-like-cooking-during-an-earthquake&quot;&gt;The Problem: Modern Web Stacks Feel Like Cooking During an Earthquake&lt;/h2&gt;
&lt;p&gt;&lt;video height=&quot;720&quot; style=&quot;aspect-ratio: 1280 / 720;&quot; width=&quot;1280&quot; autoplay=&quot;&quot; controls=&quot;&quot; loop=&quot;&quot; muted=&quot;&quot; src=&quot;https://blog.fontawesome.com/introducing-build-awesome-static-site-platform-kickstarter/clip-1-1-aK1Zgewo6eu8.mp4&quot; playsinline=&quot;&quot;&gt;&lt;/video&gt;&lt;/p&gt;
&lt;p&gt;You’ve got everything you need: design system, components, content, a plan (and maybe a playlist to jam while you’re building).&lt;/p&gt;
&lt;p&gt;But somehow shipping still runs up against the brick wall of multiple frameworks, a database + CMS layer, and a deployment pipeline held together with thoughts, prayers, and one dependency that updates every Tuesday just to remind you who’s boss.&lt;/p&gt;
&lt;p&gt;Simple edits turn into unwelcome meetings with Milton (we like him just fine). Maintenance turns into archaeology. And somewhere in your CI config, a ‘possum is chewing through a cable while maintaining unblinking eye contact.&lt;/p&gt;
&lt;h2 id=&quot;the-solution-build-awesome&quot;&gt;The Solution: Build Awesome&lt;/h2&gt;
&lt;p&gt;&lt;video height=&quot;720&quot; style=&quot;aspect-ratio: 1280 / 720;&quot; width=&quot;1280&quot; autoplay=&quot;&quot; controls=&quot;&quot; loop=&quot;&quot; muted=&quot;&quot; src=&quot;https://blog.fontawesome.com/introducing-build-awesome-static-site-platform-kickstarter/clip-2-1-PEazci3J7hAc.mp4&quot; playsinline=&quot;&quot;&gt;&lt;/video&gt;&lt;/p&gt;
&lt;p&gt;Build Awesome is static by default. That means fast sites that don’t crumble under their own stack, with:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Durable HTML output:&lt;/strong&gt; boring (compliment) pages that keep working for years&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;No database required:&lt;/strong&gt; fewer moving parts, fewer “why is prod on fire” moments&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Anywhere hosting:&lt;/strong&gt; deploy where you want, not where a platform insists&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Clearer structure for maintenance + collaboration:&lt;/strong&gt; easier edits after launch, even with team churn&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Optional Pro workflow tools:&lt;/strong&gt; safer updates, previews, and teamwork without lock-in&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Aaand, no Awesomeverse project is complete without a fun video. Well, you guessed it, a bunch of the video cast and crew are back at it (including a ‘possum mascot!) so quit readin’ and start watchin’!&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://www.kickstarter.com/projects/fontawesome/build-awesome-pro?ref=6nknva&quot; class=&quot;c-button c-button--primary&quot;&gt;&lt;svg class=&quot;c-button__icon fa11ty-icon svg-inline--fa&quot;&gt;&lt;use href=&quot;#fas-fa-rocket-launch&quot; xlink:href=&quot;#fas-fa-rocket-launch&quot;&gt;&lt;/use&gt;&lt;/svg&gt;Check out the Kickstarter!&lt;/a&gt;&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>How to Build and Style Your Visual Design System [Part III]</title>
    <link href="https://blog.fontawesome.com/how-to-build-a-visual-design-system/" />
    <updated>2026-08-13T20:41:46Z</updated>
    <id>https://blog.fontawesome.com/how-to-build-a-visual-design-system/</id>
    <content type="html">&lt;p&gt;If &lt;a href=&quot;https://blog.fontawesome.com/visual-cohesion-design-systems/&quot;&gt;Part 1&lt;/a&gt; was the pitch and &lt;a href=&quot;https://blog.fontawesome.com/design-system-components/&quot;&gt;Part 2&lt;/a&gt; was the parts list, this is your build guide. We’re getting hands-on — auditing what you’ve got, defining what you need, and laying the groundwork for a system that actually scales.&lt;/p&gt;
&lt;h2 id=&quot;conduct-a-visual-audit&quot;&gt;&lt;strong&gt;Conduct a Visual Audit&lt;/strong&gt;&lt;/h2&gt;
&lt;p&gt;First, start with a visual audit. Assess your current design elements to see what’s working, what’s not, and where there’s room for improvement. This step is crucial for aligning your visuals with your brand’s goals.&lt;/p&gt;
&lt;p&gt;To check your company’s visual style, follow these steps:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;First, make a list of all the pictures, colors, and designs you use. This helps you see what you have.&lt;/li&gt;
&lt;li&gt;Then, look at how these elements appear on different devices so you can spot differences. Figure out what looks good and what needs work in your brand’s style. Ask for opinions from non-design folks in your company to hear different views. Look at what other companies in your field are doing to see how you compare.&lt;/li&gt;
&lt;li&gt;Lastly, use what you’ve learned to set clear goals for making your visual style better and better over time. With your visual audit complete, you’ll need to define the core elements of your design system.&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id=&quot;define-core-elements&quot;&gt;&lt;strong&gt;Define Core Elements&lt;/strong&gt;&lt;/h2&gt;
&lt;p&gt;Next, choose a color palette that speaks to your brand and choose fonts that convey the right personality. These choices lay the foundation for your visual language.&lt;/p&gt;
&lt;h3 id=&quot;color&quot;&gt;Color&lt;/h3&gt;
&lt;p&gt;Keep accessibility in mind from the outset. Colors are hardly effective if they can’t support readable, meaningful pairings. Anticipate which colors may be used together and prepare to check their contrast ratios and adjust as necessary. Grab your favorite contrast tool, like WebAIM’s WCAG 2.1 contrast checker, and set forth!&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.fontawesome.com/img/built/bD47_abwjE-720.avif 720w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.fontawesome.com/img/built/bD47_abwjE-720.png&quot; alt=&quot;Color palette swatches in two rows: a top row of three large blocks in light gray, slate blue, and tan/gold; a bottom row of ten smaller swatches in off-white, light gray, warm taupe gray, dark charcoal brown, near-black, black, pale blue-gray, muted medium blue, dark navy, and light beige.&quot; width=&quot;720&quot; height=&quot;186&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Choose a primary brand color. This is the essential color that defines your brand’s personality and promotes brand awareness, like Netflix’s red or Home Depot’s orange. From this color, derive a few lighter tints and darker shades so that you have the flexibility to pair your brand color with other colors while ensuring readable contrast.&lt;/p&gt;
&lt;p&gt;Choose a neutral color to serve as a sort of canvas for your product, again with a few different tints and shades. Generally, these colors will be largely unsaturated and gray, but different products and audiences might warrant something bolder! Taking cues from the 60-30-10 rule of interior design, these colors account for 60%, or a large majority of, your web application, allowing your branded or semantic colors to grab attention. The tints and shades of your neutrals should always offer good contrast with other colors in your product.&lt;/p&gt;
&lt;p&gt;Choose any necessary semantic colors. These colors convey specific meaning to your users, such as red for error states, green for success, and yellow or orange for warning. Depending on your needs, it’s generally a good idea to have tints and shades of each semantic color that can be used for backgrounds, icons, and text against your neutral colors.&lt;/p&gt;
&lt;p&gt;Choose any number of accent colors for your brand. How many and what kind depends on the tone and attitude you want your product to have. Many products stick with just one brand color and their semantic colors, which allows the product to focus on clarity and usability. Other products employ a rainbow’s worth of accent colors, which can create high visual interest (though be careful not to hinder readability). Additional subtle, analogous colors can make your brand feel refined or pastoral, whereas louder, complementary or triadic colors can make your brand feel dynamic and exciting. Different strokes for different folks!&lt;/p&gt;
&lt;p&gt;Circle back to accessibility. Falling in love with a color only to learn that it doesn’t offer great contrast is a unique kind of disappointment. (Believe me, it’s brutal.) But that doesn’t mean you have to kick it to the curb. Take stock of all of the colors in the palette you’ve created and decide on how they should be used in your product. One pairing might work well as paragraph text on a tinted background, while a lower contrast pairing may be well suited for a flashy, bold background with large text.&lt;/p&gt;
&lt;h3 id=&quot;typography&quot;&gt;Typography&lt;/h3&gt;
&lt;p&gt;Choose a font (or two) that conveys the tone of your brand. If your brand’s font is especially unique, consider reserving this font for headings or other eye-catching text. For your body text, you’ll want a highly legible font for easy reading.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.fontawesome.com/img/built/7r4Q5HYp7A-717.avif 717w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.fontawesome.com/img/built/7r4Q5HYp7A-717.png&quot; alt=&quot;Typography specimen comparing two typefaces. On the left, a bold serif &#39;AaBbCc&#39; above an italic serif &#39;AaBbCc&#39;. On the right, separated by a vertical divider, a sans-serif typeface showing the full uppercase alphabet with numbers on one line and the full lowercase alphabet with numbers below it.&quot; width=&quot;717&quot; height=&quot;246&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Choose font weights. Loading every possible weight from thin to black won’t make your site very performant. Decide on a few, distinct font weights that you can use to give different emphasis to your text. Variable fonts can make managing font weights especially easy: these fonts combine multiple weights into a single file, reducing its file size and making it a cinch to choose different font weights later if you change your mind.&lt;/p&gt;
&lt;p&gt;Choose font sizes. Typography is key to establishing hierarchy in your content. Font size, in addition to font weight, plays a huge role in this hierarchy. You’ll want enough font sizes to cover different heading levels, body text, and supplementary details. Choosing a consistent ratio between font sizes, otherwise known as a typographic scale, can help ensure there’s enough variation in font sizes so that they’re easy to distinguish, all while maintaining a pleasing visual rhythm.&lt;/p&gt;
&lt;h3 id=&quot;spacing-and-layout&quot;&gt;Spacing and Layout&lt;/h3&gt;
&lt;p&gt;Consider information density. Think about how folks use your product. Do they often need to scan or compare a lot of data? Do they read a page linearly with the goal of absorbing and retaining information? Your users’ goals should inform how densely you pack information on screen. A sales dashboard or an email application, for example, might warrant higher density than marketing materials or an onboarding flow. Once you determine how dense your product should generally be, the spacing rules in your design system should follow suit.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.fontawesome.com/img/built/AMicb4DRDH-720.avif 720w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.fontawesome.com/img/built/AMicb4DRDH-720.png&quot; alt=&quot;Two UI card mockup wireframes side by side, each with dashed guide lines marking padding and spacing. The left card is a product listing for &#39;R2-series Astromech Droid&#39; with a description, a $3,049.99 price, a 4.5-star rating, a &#39;More Details&#39; button, and a cart icon button. The right card is a restaurant listing for &#39;Withywindle Pub and Eatery&#39; in large serif type, with a 4.5-star rating (419 reviews) and three tag pills: &#39;Gastropub,&#39; &#39;Cocktails,&#39; and &#39;Vegetarian.&#39;&quot; width=&quot;720&quot; height=&quot;216&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Choose a spacing scale. There isn’t a right or wrong way to codify spacing in your design system. Whether you like a linear scale (8, 16, 24, 32, etc.) or a geometric progression (8, 16, 32, 64, etc.), it’s all good! What’s important is that your scale is consistent, easy to design with, and creates a pleasing rhythm that works well for your users’ needs. Here’s a tip: Don’t have so many spacing values that it’s impossible to choose between them. Choosing whether there should be 8px or 16px between elements is much easier than choosing between 8px and 10px.&lt;/p&gt;
&lt;p&gt;Establish responsive layout principles. Your product should be able to adapt to any device and screen size. Media breakpoints, grid systems, and intrinsic sizing are all options for supporting usage on anything from a smartphone to a television. Just promise us you won’t remove functionality on mobile; for many people, smartphones are their sole means to access the web.&lt;/p&gt;
&lt;h2 id=&quot;craft-a-visual-language&quot;&gt;&lt;strong&gt;Craft a Visual Language&lt;/strong&gt;&lt;/h2&gt;
&lt;p&gt;Crafting a visual language involves creating guidelines for imagery and graphics. These guidelines ensure cohesive storytelling across all platforms, reinforcing your brand’s identity at every touchpoint.&lt;/p&gt;
&lt;p&gt;Examples of a visual language may include:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Illustration guidelines&lt;/li&gt;
&lt;li&gt;Photography style guide&lt;/li&gt;
&lt;li&gt;Data visualization standards&lt;/li&gt;
&lt;li&gt;Animation principles&lt;/li&gt;
&lt;li&gt;UI component design rules&lt;/li&gt;
&lt;li&gt;Brand voice and tone guidelines&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Lastly, even though it’s not about looks, include rules for how your brand should sound in writing. This helps unify your content by giving everything the same voice.&lt;/p&gt;
&lt;p&gt;Fun fact: Studies have shown that incorporating elements of controlled chaos or asymmetry in visual design systems can actually increase user engagement and brand recall. This phenomenon, known as the “Von Restorff effect,” hints at the idea that slightly breaking visual patterns in strategic ways can make certain elements more memorable, adding a dynamic edge to your design system without compromising overall consistency.&lt;/p&gt;
&lt;p&gt;With your color palette locked, your type scale set, and your spacing rules established, you’ve got the bones of a real design system. But there’s one component that deserves its own conversation — one that’s deceptively simple on the surface and surprisingly deep once you get into it. We’re talking about icons. See you in Part 4.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>The New Icon Wizard: Build an Icon Nobody’s Ever Made</title>
    <link href="https://blog.fontawesome.com/the-new-icon-wizard-build-an-icon/" />
    <updated>2026-08-04T15:09:54Z</updated>
    <id>https://blog.fontawesome.com/the-new-icon-wizard-build-an-icon/</id>
    <content type="html">&lt;blockquote&gt;
&lt;blockquote&gt;
&lt;blockquote&gt;
&lt;p&gt;A wizard is never late, nor is he early. He arrives precisely when he means to.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;/blockquote&gt;
&lt;/blockquote&gt;
&lt;hr&gt;
&lt;p&gt;The new Icon Wizard just arrived, and it hands you a brand-new toolbox and thousands upon thousands of icons to raid for parts. Stack them, shape them, combine them, resize them, and nudge them. So the next question is: what are you going to build?&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.fontawesome.com/img/built/-mU8zalvHI-720.avif 720w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.fontawesome.com/img/built/-mU8zalvHI-720.png&quot; alt=&quot;The Icon Wizard beta interface. A truck icon with a heart-shaped cutout sits on the canvas, built by combining Font Awesome&#39;s truck and heart icons. Panels show an icon picker on the left, layer and transform controls on the right, and a Save to Kit button below a custom name field reading truck-heart.&quot; width=&quot;720&quot; height=&quot;441&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;No prompts, no AI.&lt;/strong&gt; Just you, the tools, and however many layers it takes to get your creation juuuust right.&lt;/p&gt;
&lt;p&gt;Anyone can experiment with the Wizard for free. And if you’ve got a Pro account, you can download your custom creation or save it to a Kit and use it anywhere Font Awesome works.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://fontawesome.com/icons/wizard?medium=social&amp;amp;src=blog&amp;amp;series=icon-wizard-launch&amp;amp;topic=launch&quot; class=&quot;c-button c-button--primary&quot;&gt;&lt;svg class=&quot;c-button__icon fa11ty-icon svg-inline--fa&quot;&gt;&lt;use href=&quot;#fas-fa-hand-holding-magic&quot; xlink:href=&quot;#fas-fa-hand-holding-magic&quot;&gt;&lt;/use&gt;&lt;/svg&gt;Conjure an Icon&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;And one more thing: the Wizard is shipping as a beta. So, if something breaks or gets wonky, tell us. That’s what helps make it &lt;s&gt;gooder&lt;/s&gt; better.&lt;/em&gt;&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&quot;enter-the-conjuring-contest&quot;&gt;Enter the Conjuring Contest!&lt;/h2&gt;
&lt;p&gt;Now onto the fun stuff. Welcome to the Icon Wizard icon-building contest extravaganza (or something like that)! Entry is open to anyone with an active Pro subscription. That’s what lets you save your creation to a Kit and enter it into the running.&lt;/p&gt;
&lt;h3 id=&quot;how-it-works&quot;&gt;How it Works&lt;/h3&gt;
&lt;p&gt;Build something unique with the Wizard, submit it to &lt;a href=&quot;https://fontawesome.com/icons/gallery&quot;&gt;the Gallery&lt;/a&gt; and enter for the chance to win a free year of Font Awesome or some awesome swag. That’s all there is to it! Entries are open &lt;strong&gt;August 3, 2026&lt;/strong&gt; through &lt;strong&gt;September 7, 2026&lt;/strong&gt; and capped at &lt;strong&gt;5 submissions&lt;/strong&gt;, so don’t wait until the last minute. Approved entries typically go live in the gallery within a few business days of review.&lt;/p&gt;
&lt;h3 id=&quot;icon-categories&quot;&gt;Icon Categories&lt;/h3&gt;
&lt;p&gt;We’re judging in four categories, so there’s more than one way to win. You can create an icon that’s…&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Most Useful&lt;/strong&gt; — the icon you’d actually reach for in a real project&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Most Creative&lt;/strong&gt; — the “how did you even think of that?” entries&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Best Remix&lt;/strong&gt; — an existing Font Awesome icon, transformed into something new&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Funniest&lt;/strong&gt; — the one that hits the fa-team’s funny bone sweet spot&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;what-you-get&quot;&gt;What You Get&lt;/h3&gt;
&lt;p&gt;The top prize is a free year of Pro. Category winners get a featured spot in the contest gallery. PLUS a shoutout in a blog post, newsletter, and on social media. Honorable mentions walk away with swag. And if we REALLY like your submission, we may even feature it in a future Font Awesome release.&lt;/p&gt;
&lt;p&gt;Approved entries land in the Icon Wizard Gallery, and it’s not just for browsing. If you see something you like, you can save it straight to one of your own Kits.&lt;/p&gt;
&lt;p&gt;So, go make something awesome. We’d love to see it!&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>WA 3.11: Data Grid, New Components, Plus Free Toast</title>
    <link href="https://blog.fontawesome.com/wa-3-11/" />
    <updated>2026-07-30T18:41:24Z</updated>
    <id>https://blog.fontawesome.com/wa-3-11/</id>
    <content type="html">&lt;p&gt;&lt;em&gt;Everything in its place. 3.11 is about giving rows, pages, characters and parts the structure they’ve been missing.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;📊 &lt;strong&gt;A Place for Your Data&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://webawesome.com/docs/components/data-grid&quot;&gt;&lt;code&gt;&amp;lt;wa-data-grid&amp;gt;&lt;/code&gt;&lt;/a&gt; has arrived as experimental for Pro users. Sort, filter, search, select, reorder, resize and paginate; every row and column falls into place. Large datasets are virtualized automatically, only the rows on screen ever hit the DOM, so scrolling stays smooth whether you’ve got 50 rows or 50,000.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://blog.fontawesome.com/img/built/LNXKd5Nkkk-400.gif&quot; alt=&quot;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;400&quot; height=&quot;481&quot;&gt;&lt;/p&gt;
&lt;p&gt;Set &lt;code&gt;data&lt;/code&gt; and &lt;code&gt;columns&lt;/code&gt;, use the features you need, and let the grid do the heavy lifting.&lt;/p&gt;
&lt;p&gt;Don’t have Pro? &lt;a href=&quot;https://webawesome.com/purchase&quot;&gt;Get it here&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;🔢 &lt;strong&gt;A Place for Every Page , and A Place for Every Character&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Two new experimental components have been added to core, each one giving content some structure:&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://webawesome.com/docs/components/pagination&quot;&gt;&amp;lt;wa-pagination&amp;gt;&lt;/a&gt; – set &lt;code&gt;total&lt;/code&gt; and &lt;code&gt;page-size&lt;/code&gt;, and watch long lists get carved into clean, numbered pages with previous/next controls, ready to sync via the &lt;code&gt;wa-page-change&lt;/code&gt; event. Pairs naturally &lt;code&gt;wa-data-grid&lt;/code&gt;, but works anywhere you’re paging through results.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://blog.fontawesome.com/img/built/iFvVupBQMV-400.gif&quot; alt=&quot;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;400&quot; height=&quot;75&quot;&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://webawesome.com/docs/components/otp-input&quot;&gt;&amp;lt;wa-otp-input&amp;gt;&lt;/a&gt; – a proper segmented input that gives verification code exactly as many slots as you need. With paste handling and keyboard navigation built in, set &lt;code&gt;length&lt;/code&gt; and your’e off.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://blog.fontawesome.com/img/built/7nxsuYO-AZ-400.gif&quot; alt=&quot;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;400&quot; height=&quot;138&quot;&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;🍞 Toast Finds a New Home in Core&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://webawesome.com/docs/components/otp-input&quot;&gt;&lt;code&gt;&amp;lt;wa-toast&amp;gt;&lt;/code&gt;&lt;/a&gt; and &lt;a href=&quot;https://webawesome.com/docs/components/toast-item&quot;&gt;&lt;code&gt;&amp;lt;wa-toast-item&amp;gt;&lt;/code&gt;&lt;/a&gt; moved from Pro to Core. Now everyone gets stackable, top layer notifications for success messages, errors, and status updates right out of the box. No upgrade required.&lt;/p&gt;
&lt;p&gt;Drop a single &lt;code&gt;&amp;lt;wa-toast&amp;gt;&lt;/code&gt; on your page and call &lt;code&gt;.create()&lt;/code&gt; whenever you need to say something.&lt;/p&gt;
&lt;p&gt;🎠 &lt;strong&gt;Carousels Slides Fall in Line&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://webawesome.com/docs/components/carousel&quot;&gt;&lt;code&gt;&amp;lt;wa-carousel&amp;gt;&lt;/code&gt;&lt;/a&gt; now has &lt;code&gt;addSlide()&lt;/code&gt; and &lt;code&gt;removeSlide()&lt;/code&gt; methods. So you can rearrange slides in and out on the fly, even with loop enabled. Perfect for carousels that use live data instead of a fixed set of slots.&lt;/p&gt;
&lt;p&gt;🧩 &lt;strong&gt;Every Part Gets a Proper Name&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Every component that renders a wrapper element now exposes a CSS part named after the component itself (button, details, carousel, etc.) alongside the current &lt;code&gt;base&lt;/code&gt; part. Same goes for form control labels, which now expose &lt;code&gt;form-control-label&lt;/code&gt;. &lt;code&gt;base&lt;/code&gt; is softly deprecated, it’s not going anywhere for now. This update simply gives you a clearer name to reach for going forward.&lt;/p&gt;
&lt;p&gt;🧰 &lt;strong&gt;Loose Ends? Tidied Up&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;As always, WA 3.11 ships with a bunch of fixes, color picker alpha handling, tree keyboard navigation, dialogs staying open when ad blockers hide them, and much more. Full details in the &lt;a href=&quot;https://webawesome.com/docs/resources/changelog#wa_3110&quot;&gt;changelog&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Until next time! ✌️&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>The Building Blocks of a Visual Design System [Part II]</title>
    <link href="https://blog.fontawesome.com/design-system-components/" />
    <updated>2026-07-23T15:52:06Z</updated>
    <id>https://blog.fontawesome.com/design-system-components/</id>
    <content type="html">&lt;p&gt;Welcome back. &lt;a href=&quot;https://blog.fontawesome.com/visual-cohesion-design-systems/&quot;&gt;In Part 1&lt;/a&gt;, we made the case for why a visual design system is worth caring about. Now it’s time to get into the actual stuff — the design system components that give your system its look, feel, and staying power.&lt;/p&gt;
&lt;p&gt;So. Onto the design system components that make up the ingredients of a design system.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.fontawesome.com/img/built/Old9CwahZF-1440.avif 1440w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.fontawesome.com/img/built/Old9CwahZF-1440.png&quot; alt=&quot;four icons on navy background): Four colorful app icons on a navy background: a mint-green color swatch with a diagonal design tool icon, a purple-and-white Aa typography icon, a heart-music-camera-lightning bolt icon in blue, and a two-column layout icon in white and yellow.&quot; width=&quot;1440&quot; height=&quot;372&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;The key design system components include:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Color Palette:&lt;/strong&gt; Primary, secondary, and accent colors&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Typography:&lt;/strong&gt; Font families, sizes, and hierarchies&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Iconography:&lt;/strong&gt; Style, usage guidelines, and custom icons&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Imagery:&lt;/strong&gt; Photography style, illustration guidelines&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Layout:&lt;/strong&gt; Grid systems, spacing rules, and responsive design principles&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;UI Components:&lt;/strong&gt; Buttons, forms, cards, and other reusable elements&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Once you have the basics of a design system nailed down, it’s important to maintain consistency across your entire brand.&lt;/p&gt;
&lt;h2 id=&quot;the-power-of-consistency&quot;&gt;&lt;strong&gt;The Power of Consistency&lt;/strong&gt;&lt;/h2&gt;
&lt;p&gt;Think about the most successful companies; their visual identities are instantly recognizable. Here’s a little anecdote to underscore the point.&lt;/p&gt;
&lt;p&gt;I have a loveable — but not particularly smart — Shi-tzu. And he loses his ever loving mind for pup-uccinos at Starbucks (a tiny cup of whipped cream). I’ve noticed on more than a few occasions that when we walk by a Starbucks, he wags his tail so hard that I start getting anxious that a doggie chiropractor bill may be in my future.&lt;/p&gt;
&lt;p&gt;Now keep in mind, I wasn’t exclaiming to my dog that a pup-uccino was coming his way. But he either sees the sign or smells the coffee and he knows something good is imminent. I’d venture to guess that my dog has a nose for Starbucks and the cue probably isn’t the visual logo. But the point is, brand consistency ensures that every interaction with your brand is familiar and trustworthy. And if a dog can be trained on the consistency of experience, so can people.&lt;/p&gt;
&lt;p&gt;This amusing anecdote illustrates a crucial point about the power of consistent branding. Let’s delve into the advantages of a consistent brand identity and see how it translates to the digital realm.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.fontawesome.com/img/built/t7kWfkvO2S-1440.avif 1440w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.fontawesome.com/img/built/t7kWfkvO2S-1440.png&quot; alt=&quot;(four-panel UI mockup grid with Approved paw-print stamp overlay): Four design mockup panels stamped Approved: a green text style card with Aa and sample text lines, a color palette and icon panel showing coffee-brand icons overlaid with a red circular Approved stamp featuring a paw print, and a settings/form panel with toggles, star ratings, and a progress ring.&quot; width=&quot;1440&quot; height=&quot;484&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;A consistent brand identity offers lots of pluses in the digital realm. It reduces cognitive load for users, making it easier for them to navigate and interact with your digital products. Consistency also increases brand recall and loyalty, as users become more familiar with your visual language. It also improves user interface learnability, allowing users to quickly understand and navigate your digital platforms. Ultimately, these factors contribute to enhanced overall user satisfaction.&lt;/p&gt;
&lt;h2 id=&quot;why-visual-design-systems-matter&quot;&gt;&lt;strong&gt;Why Visual Design Systems Matter&lt;/strong&gt;&lt;/h2&gt;
&lt;p&gt;There are many different types and sizes of digital devices. A good design system works well on all of them, making sure users can easily understand and use the product no matter what device they’re on.&lt;/p&gt;
&lt;p&gt;When creating design systems, tech companies need to solve several problems related to making their products work on multiple devices. These include:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Making sure the content looks good on all screen sizes&lt;/li&gt;
&lt;li&gt;Accounting for device interaction (like touching a screen vs. using a mouse)&lt;/li&gt;
&lt;li&gt;Making the product run smoothly on devices with different capabilities&lt;/li&gt;
&lt;li&gt;Ensuring the product is usable for people with disabilities across all devices&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Solving these problems is important to give users a similar, high-quality experience no matter what device they use. Beyond the nuts and bolts of responsive design lies the art of visual storytelling.&lt;/p&gt;
&lt;h2 id=&quot;branding-beyond-words&quot;&gt;&lt;strong&gt;Branding Beyond Words&lt;/strong&gt;&lt;/h2&gt;
&lt;p&gt;Visual elements communicate brand values in ways words alone cannot. Believe it or not, visual elements can evoke the feels — subtle though they may be — create connections, and make your brand memorable. A strong visual design system ensures these elements are always aligned with your brand’s message.&lt;/p&gt;
&lt;p&gt;When designing to make people feel something, there are lots of considerations. Colors can affect how people experience your brand. Where some colors might make people feel calm, others might make them feel excited. Using pictures, symbols, or icons that represent ideas can help explain things quickly in a way people will remember.&lt;/p&gt;
&lt;p&gt;When your customer engages with your product, maybe you’ve included small, fun details that show off your brand’s personality and make the experience more enjoyable, and keep users interested.&lt;/p&gt;
&lt;p&gt;You’ve got the design system components in hand Now let’s talk about what to actually &lt;em&gt;do&lt;/em&gt; with them. In Part 3, we walk through a step-by-step process for auditing your current visuals, defining your core elements, and building a system that holds together under real-world pressure.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Pixel This! A Web Awesome Short-Guide to Visual Cohesion in Design Systems </title>
    <link href="https://blog.fontawesome.com/visual-cohesion-design-systems/" />
    <updated>2026-07-09T19:13:16Z</updated>
    <id>https://blog.fontawesome.com/visual-cohesion-design-systems/</id>
    <content type="html">&lt;h2 id=&quot;part-1-why-your-brand-needs-a-visual-design-system&quot;&gt;&lt;strong&gt;Part 1: Why Your Brand Needs a Visual Design System&lt;/strong&gt;&lt;/h2&gt;
&lt;p&gt;In today’s online landscape, a website’s visual identity plays a critical role because everyone knows a great looking site is more than just aesthetics; it’s about creating a good experience for the user. And this is where a design system comes in. A well-crafted design system can be a transformative tool, ensuring consistency, enhancing usability, and anchoring your brand’s presence across all digital touch points.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.fontawesome.com/img/built/K9n66V1VIR-1440.avif 1440w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.fontawesome.com/img/built/K9n66V1VIR-1440.png&quot; alt=&quot;Four flat icons on navy background: lighthouse, waving hand, speedometer, and expand arrows. &quot; width=&quot;1440&quot; height=&quot;372&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Here’s why it matters&lt;/strong&gt;:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;User Experience: A cohesive visual system guides users intuitively through your product.&lt;/li&gt;
&lt;li&gt;Brand Recognition: Consistent visuals build trust and familiarity with your audience.&lt;/li&gt;
&lt;li&gt;Efficiency: A design system streamlines the development process, saving time and resources.&lt;/li&gt;
&lt;li&gt;Scalability: As your product grows, a robust system ensures seamless expansion.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;A few more words about user experience and efficiency&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;From the Web Awesome point of view, one of the most powerful influences of visual style on UX is how it informs how the user can expect to interact with the product, creating recognizable patterns so that they can predictably navigate and work the product.&lt;/p&gt;
&lt;p&gt;Visuals that don’t properly set expectations for the user can be perceived as noisy, careless, or distracting, which negatively impacts how a user perceives the ease-of-use of a product.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.fontawesome.com/img/built/9DNnIeSrmm-1439.avif 1439w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.fontawesome.com/img/built/9DNnIeSrmm-1439.png&quot; alt=&quot;Before-and-after comparison of a subscription plan UI: low-contrast pink version next to a vivid mint-green version with the same layout.&quot; width=&quot;1439&quot; height=&quot;506&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Aesthetics are so important to usability, and it saddens me that UX evangelists can often dismiss their importance as frivolous or superficial — and this makes the Font Awesome ‘Possum sad. 😞 &lt;/p&gt;
&lt;p&gt;&lt;strong&gt;As for efficiency&lt;/strong&gt; … &lt;/p&gt;
&lt;p&gt;A design system makes a product resilient to the whims of designers. Design trends change, and designers often like to be on the frontlines of these changes. Design systems make this not only possible but seamless, allowing us to uniformly change the look and feel of a product with minimal impact to development throughput.&lt;/p&gt;
&lt;p&gt;So in this blog, we’ve covered the &lt;em&gt;why&lt;/em&gt;. But what exactly &lt;em&gt;is&lt;/em&gt; a visual design system made of? Up next, we’ll break down the aesthetic building blocks that bring cohesion to your brand’s look and feel. Spoiler alert: color theory nerds, you’re gonna love it!&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Font Awesome 7.3 Is Here!</title>
    <link href="https://blog.fontawesome.com/font-awesome-7-3-release/" />
    <updated>2026-07-08T17:38:22Z</updated>
    <id>https://blog.fontawesome.com/font-awesome-7-3-release/</id>
    <content type="html">&lt;p&gt;Summer’s here (for those of us in the northern hemisphere, anyway), and so is Font Awesome 7.3 — live and ready to give your project some personality. This release leans into motion, depth, and texture, with three new Pro+ packs, a couple of fresh Slab styles, six new animations, and a handful of quality-of-life fixes (including one very overdue correction for our own mascot).&lt;/p&gt;
&lt;h2 id=&quot;three-new-pro-packs&quot;&gt;&lt;strong&gt;Three New Pro+ Packs&lt;/strong&gt;&lt;/h2&gt;
&lt;p&gt;Pro+ subscribers get a serious style upgrade this release, with three brand-new icon packs, each with its own personality!&lt;/p&gt;
&lt;h3 id=&quot;pixel-it-s-hip-to-be-square&quot;&gt;&lt;strong&gt;&lt;a href=&quot;https://fontawesome.com/icons/packs/pixel&quot;&gt;Pixel&lt;/a&gt;&lt;/strong&gt; – It’s hip to be square&lt;/h3&gt;
&lt;p&gt;Before high-density displays, the mighty pixel was king. Before quarters held your place at the arcade and computers ran on 128kb of memory. If you’re prepping your next plumbing adventure or space invasion, Pixel is ready to byte.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.fontawesome.com/img/built/o_Gc1M0wyx-2160.avif 2160w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.fontawesome.com/img/built/o_Gc1M0wyx-2160.png&quot; alt=&quot;Lots of icons arranged around the word Pixel&quot; width=&quot;2160&quot; height=&quot;1134&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.fontawesome.com/img/built/7N7D73jPcV-2160.avif 2160w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.fontawesome.com/img/built/7N7D73jPcV-2160.png&quot; alt=&quot;&quot; width=&quot;2160&quot; height=&quot;1080&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;mosaic-all-the-pieces-are-coming-together&quot;&gt;&lt;strong&gt;&lt;a href=&quot;https://fontawesome.com/icons/packs/mosaic&quot;&gt;Mosaic&lt;/a&gt;&lt;/strong&gt; – All the pieces are coming together&lt;/h3&gt;
&lt;p&gt;Icons are little art pieces built from many elements, and FA Mosaic is no different. Master craftsman Josh Williams blends solid forms, swoopy curves, and the fun little sprinkles he lovingly calls “quirks.”&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.fontawesome.com/img/built/C70cJyaC-3-2160.avif 2160w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.fontawesome.com/img/built/C70cJyaC-3-2160.png&quot; alt=&quot;Lots of icons scattered around the word Mosaic&quot; width=&quot;2160&quot; height=&quot;1134&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.fontawesome.com/img/built/IHoDkml8nz-2160.avif 2160w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.fontawesome.com/img/built/IHoDkml8nz-2160.png&quot; alt=&quot;&quot; width=&quot;2160&quot; height=&quot;1080&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;vellum-layers-of-depth&quot;&gt;&lt;a href=&quot;https://fontawesome.com/icons/packs/vellum&quot;&gt;&lt;strong&gt;Vellum&lt;/strong&gt;&lt;/a&gt; – Layers of depth&lt;/h3&gt;
&lt;p&gt;We like our icons like we like our jokes: layered. Guest designer Brian Brasher guides you through overlapping slabs of significance for a pack with real dimension.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.fontawesome.com/img/built/qqZaRTrXpr-2160.avif 2160w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.fontawesome.com/img/built/qqZaRTrXpr-2160.png&quot; alt=&quot;Lots of icons arranged around the word Vellum&quot; width=&quot;2160&quot; height=&quot;1134&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.fontawesome.com/img/built/ZTMEe12Z1B-2160.avif 2160w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.fontawesome.com/img/built/ZTMEe12Z1B-2160.png&quot; alt=&quot;&quot; width=&quot;2160&quot; height=&quot;1080&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h2 id=&quot;new-slab-styles&quot;&gt;&lt;strong&gt;New Slab Styles&lt;/strong&gt;&lt;/h2&gt;
&lt;p&gt;Our sturdy, blocky Slab family grows by two: &lt;a href=&quot;https://fontawesome.com/search?f=slab-duo&quot;&gt;&lt;strong&gt;Slab Duo&lt;/strong&gt;&lt;/a&gt; and &lt;a href=&quot;https://fontawesome.com/search?f=slab-press-duo&quot;&gt;&lt;strong&gt;Slab Press Duo&lt;/strong&gt;&lt;/a&gt;. Both add a second layer of color and depth to icons that already feel bold and ready for action.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.fontawesome.com/img/built/mbtchqlZAP-2160.avif 2160w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.fontawesome.com/img/built/mbtchqlZAP-2160.png&quot; alt=&quot;Two example mockups with new Slab Duo icons: playing cards and a grab of various icons on a pink background &quot; width=&quot;2160&quot; height=&quot;810&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h2 id=&quot;icons-with-main-character-energy&quot;&gt;&lt;strong&gt;Icons With Main Character Energy&lt;/strong&gt;&lt;/h2&gt;
&lt;p&gt;7.3 adds six all-new animations — &lt;code&gt;fa-wag&lt;/code&gt;, &lt;code&gt;fa-swing&lt;/code&gt;, &lt;code&gt;fa-float&lt;/code&gt;, &lt;code&gt;fa-buzz&lt;/code&gt;, &lt;code&gt;fa-spin-snap&lt;/code&gt;, and &lt;code&gt;fa-jello&lt;/code&gt; — and gives our existing animations a glow-up too. We leaned into classic animation principles like anticipation, weight, playfulness, and physicality to make the motion feel alive. All animations respect prefers-reduced-motion and work out of the box. Check out the full rundown in the &lt;a href=&quot;https://fontawesome.com/docs/web/style/animate&quot;&gt;animation docs&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;video height=&quot;366&quot; style=&quot;aspect-ratio: 536 / 366;&quot; width=&quot;536&quot; autoplay=&quot;&quot; loop=&quot;&quot; muted=&quot;&quot; src=&quot;https://blog.fontawesome.com/font-awesome-7-3-release/7-3-anim-AIsKrRDbbVvc.mp4&quot; playsinline=&quot;&quot;&gt;&lt;/video&gt;&lt;/p&gt;
&lt;h2 id=&quot;give-your-icons-some-breathing-room&quot;&gt;&lt;strong&gt;Give Your Icons Some Breathing Room&lt;/strong&gt;&lt;/h2&gt;
&lt;p&gt;We also added two new opt-in padding utilities: fa-canvas-square and fa-canvas-roomy. Square gives your icon a clean, even square canvas; Roomy does the same with a bit more space to breathe. Both scale in em units and mirror the &lt;a href=&quot;https://fontawesome.com/&quot;&gt;options in our Figma component&lt;/a&gt;, so what you design is exactly what ships.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.fontawesome.com/img/built/JbRcNt1KUG-2160.avif 2160w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.fontawesome.com/img/built/JbRcNt1KUG-2160.png&quot; alt=&quot;3 types of Font Awesome icon padding: Default (fixed width), Square, and Roomy&quot; width=&quot;2160&quot; height=&quot;936&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;And as usual, 7.3 adds a bunch of fixes and a handful of brand new icons! Full details are available in the &lt;a href=&quot;https://fontawesome.com/changelog&quot;&gt;changelog&lt;/a&gt;.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>WA 3.10: Random Content and New Pro+ Icons</title>
    <link href="https://blog.fontawesome.com/wa-3-10/" />
    <updated>2026-06-30T18:29:28Z</updated>
    <id>https://blog.fontawesome.com/wa-3-10/</id>
    <content type="html">&lt;h2 id=&quot;random-content&quot;&gt;🍫 Random Content&lt;/h2&gt;
&lt;p&gt;How about a little spontaneity? &lt;a href=&quot;https://webawesome.com/docs/components/random-content/&quot;&gt;&lt;em&gt;&amp;lt;wa-random-content&amp;gt;&lt;/em&gt;&lt;/a&gt; helps spice things up by randomly displaying one (or more — your choice!) of its slotted child elements.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://blog.fontawesome.com/img/built/JXUULBGFh4-480.gif&quot; alt=&quot;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;480&quot; height=&quot;97&quot;&gt;&lt;/p&gt;
&lt;p&gt;Choose whether the displayed items are &lt;em&gt;truly&lt;/em&gt; random or shown in sequence, if content autoplays, and how it animates. It’s a great fit for testimonials, featured tips and tricks, and wherever you need a little variety.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;&amp;lt;wa-random-content&amp;gt;&lt;/em&gt; is like a box of chocolates. &lt;a href=&quot;https://youtu.be/vdtqSaJO-iM?si=Qi0M2WBakbZhmZP5&amp;amp;t=32&quot;&gt;You never know what you’re gonna get.&lt;/a&gt;&lt;/p&gt;
&lt;h2 id=&quot;fa-7-3-in-wa-icon&quot;&gt;👾 FA 7.3 in &amp;lt;wa-icon&amp;gt;&lt;/h2&gt;
&lt;p&gt;Five (!) new icon families are now available to use with &lt;a href=&quot;https://webawesome.com/docs/components/icon/&quot;&gt;&lt;em&gt;&amp;lt;wa-icon&amp;gt;&lt;/em&gt;&lt;/a&gt;, thanks to &lt;a href=&quot;https://fontawesome.com/changelog&quot;&gt;Font Awesome 7.3&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.fontawesome.com/img/built/dMj7emzDro-720.avif 720w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.fontawesome.com/img/built/dMj7emzDro-720.png&quot; alt=&quot;&quot; width=&quot;720&quot; height=&quot;131&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Kick it old school with &lt;a href=&quot;https://fontawesome.com/icons/packs/pixel&quot;&gt;Pixel&lt;/a&gt;, piece it together with &lt;a href=&quot;https://fontawesome.com/icons/packs/mosaic&quot;&gt;Mosaic&lt;/a&gt;, or lay it on &lt;s&gt;thick&lt;/s&gt; thin with &lt;a href=&quot;https://fontawesome.com/icons/packs/vellum&quot;&gt;Vellum&lt;/a&gt;. If the blocky Slab vibe is more your style, add even more depth with &lt;a href=&quot;https://fontawesome.com/search?f=slab-duo&quot;&gt;Slab Duo&lt;/a&gt; and &lt;a href=&quot;https://fontawesome.com/search?f=slab-press-duo&quot;&gt;Slab Press Duo&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;For even more panache, dazzle folks with &lt;a href=&quot;https://webawesome.com/docs/components/icon/#animating&quot;&gt;new animations&lt;/a&gt;: &lt;em&gt;buzz&lt;/em&gt;, &lt;em&gt;flip-360&lt;/em&gt;, &lt;em&gt;float&lt;/em&gt;, &lt;em&gt;jello&lt;/em&gt;, &lt;em&gt;spin-snap&lt;/em&gt; (plus &lt;em&gt;spin-snap-4&lt;/em&gt; and &lt;em&gt;spin-snap-8&lt;/em&gt;), &lt;em&gt;swing&lt;/em&gt;, and &lt;em&gt;wag&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://blog.fontawesome.com/img/built/JDSrQnrsM6-320.gif&quot; alt=&quot;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;320&quot; height=&quot;84&quot;&gt;&lt;/p&gt;
&lt;p&gt;Plus, &lt;em&gt;&amp;lt;wa-icon&amp;gt;&lt;/em&gt; has a &lt;a href=&quot;https://webawesome.com/docs/components/icon/#canvas&quot;&gt;new &lt;em&gt;canvas&lt;/em&gt; attribute&lt;/a&gt;, replacing the &lt;em&gt;auto-width&lt;/em&gt; boolean attribute, for greater control over an icon’s proportions and positioning.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.fontawesome.com/img/built/5CWPsWGO74-720.avif 720w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.fontawesome.com/img/built/5CWPsWGO74-720.png&quot; alt=&quot;&quot; width=&quot;720&quot; height=&quot;266&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h2 id=&quot;there-s-always-more&quot;&gt;🧰 There’s &lt;em&gt;Always&lt;/em&gt; More&lt;/h2&gt;
&lt;p&gt;A developer’s work is never done. WA 3.10 is loaded with many more fixes and improvements, which you can &lt;a href=&quot;https://webawesome.com/docs/resources/changelog#wa_3100&quot;&gt;read all about on our changelog&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Until next time! ✌️&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Staying True to Open Source: An Honest Reflection</title>
    <link href="https://blog.fontawesome.com/staying-true-to-open-source-an-honest-reflection/" />
    <updated>2026-06-25T19:28:58Z</updated>
    <id>https://blog.fontawesome.com/staying-true-to-open-source-an-honest-reflection/</id>
    <content type="html">&lt;p&gt;A few months ago, we started to notice something uncomfortable in the Web Awesome- Awesomeverse. Not outright anger from the community, but maybe something more like skepticism. &lt;/p&gt;
&lt;p&gt;This uncomfortable feeling showed up in Discord threads and support emails. We were getting the message that folks were testing the waters, but that maybe they weren’t sure they trusted us just yet. And when we took an honest look at what was happening, the answer started coming into view: during the Web Awesome Kickstarter, we were in a rush to ship, and we’d started acting more like a product company instead of an open source project. We were sending mixed signals. &lt;/p&gt;
&lt;p&gt;That’s not who we are.&lt;/p&gt;
&lt;h2 id=&quot;how-it-happened&quot;&gt;&lt;strong&gt;How It Happened&lt;/strong&gt;&lt;/h2&gt;
&lt;p&gt;During a Kickstarter, shipping on time matters. Backers were waiting, but there’s a cost to working fast, and in this situation the cost was that we’d lost clarity about what Web Awesome actually is, and about who it’s for.&lt;/p&gt;
&lt;p&gt;We had prioritized account creation, which made the paywall feel more prominent than the free tier, but that wasn’t the result of sneaky intentions. Our real-time decisions were the result of a team figuring out how to be a sustainable business while also staying true to an open source project. Those two things are genuinely tricky to balance, and we found the line by crossing it.&lt;/p&gt;
&lt;h2 id=&quot;what-s-actually-true&quot;&gt;&lt;strong&gt;What’s Actually True&lt;/strong&gt;&lt;/h2&gt;
&lt;p&gt;As an open source web components library, Web Awesome is likely the most serious platform-agnostic option in the web components space right now. We’re not trying to puff ourselves up by making that claim, it’s just the reality of the landscape.&lt;/p&gt;
&lt;p&gt;Our goal has always been to lower the bar for building accessible, usable, well-made things on the web. A lot of the built-in challenges like accessibility, component behavior, cross-framework compatibility, are difficulties that individual developers and small teams shouldn’t have to solve from the ground up every single time. Web Awesome exists to solve those issues once, for everybody.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.fontawesome.com/img/built/0zTMAxCpRs-1440.avif 1440w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.fontawesome.com/img/built/0zTMAxCpRs-1440.png&quot; alt=&quot;4 Font Awesome icons on a navy background: puzzle, Web Awesome crown, funnel, upward chart with dollar sign&quot; width=&quot;1440&quot; height=&quot;372&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;So, why does this mean? Well, the free tier isn’t a funnel. The free tier is the whole point.&lt;/p&gt;
&lt;p&gt;Web Awesome Pro exists because building and maintaining a serious open source project requires a team to maintain it, and teams need to eat. To put it in perspective, the conversion rate on a project like this is probably somewhere in the neighborhood of between 1–4%. That means the majority of people who use Web Awesome will never pay for it. And that’s totally cool, because that’s a model we believe in and always have. The goal is to give useful tools to as many people as possible while also providing options to those who want to take things up a notch. &lt;/p&gt;
&lt;h2 id=&quot;the-course-correction&quot;&gt;&lt;strong&gt;The Course Correction&lt;/strong&gt;&lt;/h2&gt;
&lt;p&gt;We’ve already changed the homepage to lower the bar to entry. And we have a public CDN that’s available to everyone. Now, signing up for Web Awesome is optional, but not required, and we’ve got more coming. We’re not building more features as a Public Relations gimmick, but as a reflection of what was always true, but got obscured for a minute.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.fontawesome.com/img/built/FZcJnlr1Yc-1440.avif 1440w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.fontawesome.com/img/built/FZcJnlr1Yc-1440.png&quot; alt=&quot;4 Font Awesome icons on a navy background: redo arrow, face with dotted outline, wrench, person raising a hand&quot; width=&quot;1440&quot; height=&quot;372&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;We didn’t need to convince ourselves to care about open source. We needed to be reminded again not to let the pressure to ship fast pull us away from it. And when Cory raised the concern internally, the response from leadership was immediate: &lt;em&gt;yeah, go fix it&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;Being able to raise those kinds of concerns, and pump the brakes, is not a given at most companies. And that feels worth highlighting, too.&lt;/p&gt;
&lt;h2 id=&quot;what-comes-next&quot;&gt;&lt;strong&gt;What Comes Next&lt;/strong&gt;&lt;/h2&gt;
&lt;p&gt;Trust isn’t rebuilt through announcements, but by showing up consistently over time, shipping good work, to ensure the free tier is genuinely useful, and then being honest when something goes sideways.&lt;/p&gt;
&lt;p&gt;That’s our plan. Not because it’s good marketing, but because it has been, and always will be, the only version of this worth doing.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>WA 3.9: AI Design Skill and Checkbox Group</title>
    <link href="https://blog.fontawesome.com/wa-3-9/" />
    <updated>2026-06-18T18:17:20Z</updated>
    <id>https://blog.fontawesome.com/wa-3-9/</id>
    <content type="html">&lt;h2 id=&quot;new-ai-design-skill&quot;&gt;🤖 New AI Design Skill&lt;/h2&gt;
&lt;p&gt;&lt;em&gt;Hello, Mr. Anderson.&lt;/em&gt; There’s a new Agent Skill on the block.&lt;/p&gt;
&lt;p&gt;The &lt;a href=&quot;https://webawesome.com/docs/ai/agent-skills&quot;&gt;&lt;em&gt;webawesome-design&lt;/em&gt; skill&lt;/a&gt; helps AI agents better understand how to design and build UI with Web Awesome. This new skill offers tailored documentation on theming, building with &lt;em&gt;&amp;lt;wa-page&amp;gt;&lt;/em&gt;, and using layout utility classes, along with guidance on design principles and visual composition.&lt;/p&gt;
&lt;p&gt;That means you can instruct your agent to “build a documentation page on Agent Smith and create a Matrix theme to go with it” to get something like this:&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.fontawesome.com/img/built/ATM9Tfnuh4-720.avif 720w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.fontawesome.com/img/built/ATM9Tfnuh4-720.png&quot; alt=&quot;&quot; width=&quot;720&quot; height=&quot;577&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Or, instruct it to “build a trendy marketing page for my buddy Joey’s new little piñata business” to get something like this:&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.fontawesome.com/img/built/s3HkHs8nyU-720.avif 720w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.fontawesome.com/img/built/s3HkHs8nyU-720.png&quot; alt=&quot;&quot; width=&quot;720&quot; height=&quot;577&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h2 id=&quot;checkbox-group&quot;&gt;☑️ Checkbox Group&lt;/h2&gt;
&lt;p&gt;Not every choice is either-or. The new &lt;a href=&quot;https://webawesome.com/docs/components/checkbox-group/&quot;&gt;&lt;em&gt;&amp;lt;wa-checkbox-group&amp;gt;&lt;/em&gt;&lt;/a&gt; wraps related &lt;em&gt;&amp;lt;wa-checkbox&amp;gt;&lt;/em&gt; (or &lt;em&gt;&amp;lt;wa-switch&amp;gt;&lt;/em&gt;!) components together with a shared label and hint along with accessible semantics.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.fontawesome.com/img/built/eMUKdp4MH0-354.avif 354w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.fontawesome.com/img/built/eMUKdp4MH0-354.png&quot; alt=&quot;&quot; width=&quot;354&quot; height=&quot;318&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h2 id=&quot;more-anomalies-corrected&quot;&gt;🕶️ More Anomalies Corrected&lt;/h2&gt;
&lt;p&gt;There are more fixes and crowd-pleasers in WA 3.9, including:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;New &lt;em&gt;selection=”leaf-multiple”&lt;/em&gt; for &lt;a href=&quot;https://webawesome.com/docs/components/tree/#selection-modes&quot;&gt;&lt;em&gt;&amp;lt;wa-tree&amp;gt;&lt;/em&gt;&lt;/a&gt;, allowing users to select multiple leaf nodes while parent nodes simply expand and collapse&lt;/li&gt;
&lt;li&gt;Support for native &lt;em&gt;&amp;lt;button&amp;gt;&lt;/em&gt; elements in &lt;a href=&quot;https://webawesome.com/docs/components/button-group/#native-buttons&quot;&gt;&lt;em&gt;&amp;lt;wa-button-group&amp;gt;&lt;/em&gt;&lt;/a&gt;, as long as you have Native Styles enabled&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://webawesome.com/docs/resources/changelog#wa_390&quot;&gt;Take a look at our changelog&lt;/a&gt; for all of the newest additions and changes in WA 3.9.&lt;/p&gt;
&lt;p&gt;To all of you dads and dad-like folk out there: Happy Father’s Day! (And shoutout to my dad, who dutifully reads every update even though he has no need for WA. 👋)&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Why We’re Staying Curious and Reasonable About AI</title>
    <link href="https://blog.fontawesome.com/using-ai-tools-as-a-small-team/" />
    <updated>2026-06-11T13:25:00Z</updated>
    <id>https://blog.fontawesome.com/using-ai-tools-as-a-small-team/</id>
    <content type="html">&lt;blockquote&gt;
&lt;p&gt;Strange things are afoot at the Circle K.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;hr&gt;
&lt;p&gt;There’s a version of this post where we could tell you AI changed everything overnight and that we’re never looking back. The thing is, that’s not what happened.&lt;/p&gt;
&lt;p&gt;What actually happened is slower, and we think, more interesting. At the moment, we think AI use is more about intent, and what it means to build something for other people, not just crank out high volumes of slop. &lt;/p&gt;
&lt;h2 id=&quot;we-didn-t-come-in-as-true-believers&quot;&gt;&lt;strong&gt;We Didn’t Come In As True Believers&lt;/strong&gt;&lt;/h2&gt;
&lt;p&gt;When AI tools started becoming more common for devs and designers, it’s not like we were in a huge rush to embrace them. But we were curious, aaaand also a bit skeptical. Travis put it plainly: &lt;em&gt;“It’s not necessarily the world I would have envisioned or I would have picked.”&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;That’s an honest thing to say out loud, and a sentiment worth considering. This is a little Captian Obvious to say, but there’s a real disruption happening. The things a lot of us have gotten really good at (like the craft of writing a function, solving a gnarly UI problem, debugging until 1am because the thing just wouldn’t work) are changing. Some of them are getting eaten up by AI. &lt;/p&gt;
&lt;p&gt;But rather than become doomsday prophets about how we’re all getting rolled over by the AI Overlords, we’ve decided to stay “curious and reasonable”. It turns out, curious and reasonable is one of the three core behaviors we try to practice at Font Awesome, and that means we don’t jump to a dogmatic conclusion before we’ve actually spent time with something. But it also means we reserve the right to change our opinions when the evidence changes. So, we approach AI tools with some healthy skepticism, but if the tools get better, and it opens more opportunities, we’ll acknowledge that as we continue learning.&lt;/p&gt;
&lt;p&gt;So we ran an experiment. We called it Build Week.&lt;/p&gt;
&lt;h2 id=&quot;build-week-what-we-actually-found-out&quot;&gt;&lt;strong&gt;Build Week: What We Actually Found Out&lt;/strong&gt;&lt;/h2&gt;
&lt;p&gt;At our most recent all company Snuggle, everyone on the team came in and spent a week building — and not necessarily on Font Awesome projects. Nobody was under any particular pressure, the goals was just to build using AI to see what happened. &lt;/p&gt;
&lt;p&gt;The results surprised us. Not because the AI did everything for us, but because of &lt;em&gt;where&lt;/em&gt; it helped most. Most folks gravitated toward their areas of deepest expertise and used the tools to reach further around the edges. Security folks got more thorough security. Designers got more precise design. Developers finally got to clearing out the decade-long backlog items that never made it into a sprint.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.fontawesome.com/img/built/sCng7ettMA-1440.avif 1440w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.fontawesome.com/img/built/sCng7ettMA-1440.png&quot; alt=&quot;4 Font Awesome icons on a navy background: Bézier curve, shield with keyhole, code brackets, paint palette&quot; width=&quot;1440&quot; height=&quot;372&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Dave Gandy, who spent the week building Color Awesome (a tool he’d wanted to make for years) put it this way: &lt;em&gt;AI helps you be more of who you are, not less.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;That was the unexpected part. With AI, there’s often an assumption that it would flatten everyone into generic output. What we found was almost the opposite. When you know what you want and you understand the domain, the tools can amplify your judgment. The stuff that fell out of the week felt specific, personal, and fully ours. Dave’s color palette visualizer ended up looking like stained glass — because he’d just been to the Sagrada Família and that’s where his head was. The tool wasn’t a replacement for true taste. It gave the taste somewhere to go, but faster.&lt;/p&gt;
&lt;h2 id=&quot;the-question-that-actually-matters&quot;&gt;&lt;strong&gt;The Question That Actually Matters&lt;/strong&gt;&lt;/h2&gt;
&lt;p&gt;Here’s a question we kept coming back to: &lt;em&gt;What are we doing this for, and why?&lt;/em&gt; That may sound simple, but it isn’t.  &lt;/p&gt;
&lt;p&gt;For example, if the goal is to learn to code, leaning on AI to write all your code is a bad idea. You’ll ship stuff you don’t understand and can’t maintain. Kind of like how a student might use AI to write every paper isn’t learning to write, rather, they’re just checking an assignment off a list.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.fontawesome.com/img/built/TSNrNagw3k-1440.avif 1440w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.fontawesome.com/img/built/TSNrNagw3k-1440.png&quot; alt=&quot;4 Font Awesome icons on a navy background: question mark, checklist, ship, target with arrow&quot; width=&quot;1440&quot; height=&quot;372&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;But if the goal is to build great software for real people, that’s different. The end user doesn’t care how long it took you to write the function, they care about whether it works, whether it’s fast, and whether it gets out of their way. And if these tools let a small team ship five or ten times more of the right things for the people they’re serving, that’s not cheating, it’s focus.&lt;/p&gt;
&lt;p&gt;That framing shifted something for us, because the best engineers aren’t the ones who write code in the way that’s most fun for them. They write code in the way that’s most useful for someone else. AI, used right, is just another way to stay focused on that goal.&lt;/p&gt;
&lt;h2 id=&quot;more-power-harder-choices&quot;&gt;&lt;strong&gt;More Power, Harder Choices&lt;/strong&gt;&lt;/h2&gt;
&lt;p&gt;Here’s the part nobody warns you about: when you can build almost anything, the hardest skill becomes knowing what &lt;em&gt;not&lt;/em&gt; to build.&lt;/p&gt;
&lt;p&gt;Travis framed it as a quality problem. When you can produce so much more output, the bottleneck of workflows shifts to review, to make sure what ships are actually good, reliable, and useful. The speed is real, but so is the responsibility to stay user-centric, and useful.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.fontawesome.com/img/built/kALi90cGB_-1440.avif 1440w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.fontawesome.com/img/built/kALi90cGB_-1440.png&quot; alt=&quot;4 Font Awesome icons on a navy background: tools, checkmark in a speech bubble, open box, ban slash&quot; width=&quot;1440&quot; height=&quot;372&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Dave made the same point from a product angle: more features aren’t better. Anyone who’s ever moved to a new house knows what he means. Every box you carry down the stairs is a feature you have to maintain forever. It’s the right stuff that you’re looking for, not more stuff.&lt;/p&gt;
&lt;p&gt;So we’re thinking harder about discernment. Who do we talk to? What do our customers actually need? What does simplicity look like when you suddenly have the ability to add … anything? The ability to say &lt;em&gt;no&lt;/em&gt; confidently, quickly, and on purpose has never been more important.&lt;/p&gt;
&lt;h2 id=&quot;the-concerns-we-take-seriously&quot;&gt;&lt;strong&gt;The Concerns We Take Seriously&lt;/strong&gt;&lt;/h2&gt;
&lt;p&gt;We’re also not going to skip past the hard parts of the conversation. AI raises real questions. Energy and compute costs are real. The ethics of training data — what was scraped, from whom, and under what permissions — are real. The effect on jobs, on what it means to be a developer or designer, on the skills people spend years building, that’s real, too.&lt;/p&gt;
&lt;p&gt;Travis put it honestly: you can’t put the genie back in the bottle on some of this. Maybe we get better moving forward, but we also need better governance. And we definitely need to keep having the hard conversations rather than pretending they’re settled.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.fontawesome.com/img/built/H7cI_awmkN-1440.avif 1440w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.fontawesome.com/img/built/H7cI_awmkN-1440.png&quot; alt=&quot;4 Font Awesome icons on a navy background: lightning bolt, nervous sweating face, balanced scale, handshake&quot; width=&quot;1440&quot; height=&quot;372&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Dave’s take is that this is the same story technology has always told. You can do remarkable things with powerful tools, and you can do terrible things with them too. The question has always been intent and character, not capability alone. All capability and no character is, as Dave put it, just a supervillain. Zod doesn’t have a product strategy, he just has power and no guardrails.&lt;/p&gt;
&lt;p&gt;Character has to come first. That’s true for people, and it has to be true for how we adopt these tools at Font Awesome.&lt;/p&gt;
&lt;h2 id=&quot;why-we-re-still-here-still-curious&quot;&gt;&lt;strong&gt;Why We’re Still Here, Still Curious&lt;/strong&gt;&lt;/h2&gt;
&lt;p&gt;Here’s what we keep coming back to: the people who get hit hardest by major technological transitions are almost always the ones who refuse to engage with them at all.&lt;/p&gt;
&lt;p&gt;That’s not a reason to abandon your judgment. It’s a reason to use it. Stay curious, and ask the hard questions. Don’t just accept the hype, but don’t perform skepticism as a substitute for actually figuring out the right thing to do. &lt;/p&gt;
&lt;p&gt;We ran Build Week because we wanted to start poking around and start formulating opinions, and find a way forward. What we found was that these tools, used with clear intent and real taste, actually help people become more of who they are. That was the surprise, and that’s why we’re staying curious.&lt;/p&gt;
&lt;p&gt;Obviously, this conversation will look different a year from now. And it will probably be different a month from now. But the framework we’re working from, to stay curious and reasonable, humble and helpful, adventurous and dependable — that’s all the same. &lt;/p&gt;
&lt;p&gt;Now, go forth and go make something awesome!&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;&lt;em&gt;This post is based on conversations from &lt;a href=&quot;https://www.podcastawesome.com/2092855/episodes/19065993-build-week-what-we-made-with-ai-part-1-with-dave-travis&quot;&gt;Episodes 1&lt;/a&gt; and &lt;a href=&quot;https://www.podcastawesome.com/2092855/episodes/19099835-say-no-more-what-ai-actually-changes-part-2&quot;&gt;2&lt;/a&gt; of Podcast Awesome with Dave Gandy and Travis Chase. Listen wherever you get podcasts or at&lt;/em&gt; &lt;a href=&quot;https://podcastawesome.com/&quot;&gt;&lt;em&gt;podcastawesome.com&lt;/em&gt;&lt;/a&gt;&lt;em&gt;.&lt;/em&gt;&lt;/p&gt;
</content>
  </entry>
</feed>