 In today's GUI snippet, we're building an icon button. Sounds simple enough, right? I mean, look, it's so cute how it bounces when I click. Aw. The goal is a button that's either on or off, uses a checkbox for state and is mindful of accessibility. Starting with the HTML, we're gonna pile some elements on top of each other and an input and a label, always gotta have a label y'all and some art. Some easy wins here, connecting the label in the checkbox with an ID and a four and then putting Aria hidden on the SVG. Make the label only content available to screen reader users. And from here, make the icon button a grid. Pile the elements on top of each other with grid area one to one and inclusively hide that label by making it zero by zero and overflow hidden. Make the checkbox the size of the button so the interactive space matches the visual space and lastly, drop a has in there to change the button state based on the state of the checkbox. Sprinkle in some focus outline animation and you're good to go. Check out the code pen in the show notes for all the details and stick around for the next GUI snippet.