Foundations
Icons
Tabler Icons provides consistent outline SVGs for navigation, actions, and supporting information. Start with the sun and moon used by the travel page theme toggle.
Usage & approach
Install with npm install --save-dev @tabler/icons. Copy only the selected SVGs from node_modules/@tabler/icons/icons/outline into anonymous Blade components in resources/views/components/icons. Replace the source class attribute with the Blade attribute bag, retain currentColor, and mark decorative SVGs aria-hidden="true" and focusable="false". The checked-in components render without Node.js at runtime. Recopy selected icons when updating the package.
Specifications
- Installed library
- Tabler Icons v3.49.0; official @tabler/icons npm package; MIT license.
- Blade usage
- <x-icons.sun class="size-6" /> or <x-icons.moon class="size-5" />. These two components are available in this application.
- Appearance
- 24 × 24 viewBox, 2px outline stroke, rounded caps and joins. Inline SVG inherits text color through currentColor; use text-[#006838] dark:text-[#f4f5f2].
- Accessible controls
- Use a native button with an accessible action label, a visible keyboard focus outline, and a minimum 44 × 44px target. Hide decorative icons from screen readers.
- Theme toggle
- The travel page uses Alpine toggleTheme(), a changing aria-label/title, and dark:hidden / hidden dark:block icons. Existing theme persistence stays in travelMockup.
- Source and license
- Browse https://tabler.io/icons. SVG usage: https://docs.tabler.io/icons/static-files/svg. The package license is in node_modules/@tabler/icons/LICENSE; the shared icon license is also retained under public/images/mockups/travel-insurance/shared/icons.
Sun and moon
Inline icons inherit the surrounding text color in both themes. The HTML panel contains portable SVG markup; Blade callers can use the components listed above.
<div class="flex items-center gap-8 text-[#006838] dark:text-[#f4f5f2]"><span class="inline-flex items-center gap-3"><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
focusable="false"
class="size-6"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M8 12a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
<path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" />
</svg><span>Light mode</span></span><span class="inline-flex items-center gap-3"><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
focusable="false"
class="size-6"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454l0 .008" />
</svg><span>Dark mode</span></span></div>HTML + Tailwind CSS · fit to panel
Icon-only theme control
Visual reference: moon in light mode, sun in dark mode. This sandboxed preview does not change theme when clicked. The working toggle is on the travel insurance landing page.
<button type="button" aria-label="Switch color theme" class="inline-flex size-11 items-center justify-center rounded-full text-[#006838] hover:bg-[#f1f2f0] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#006838] dark:text-[#f4f5f2] dark:hover:bg-[#303232] dark:focus-visible:outline-white"><span class="dark:hidden"><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
focusable="false"
class="size-6"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454l0 .008" />
</svg></span><span class="hidden dark:block"><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
focusable="false"
class="size-6"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M8 12a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
<path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" />
</svg></span></button>HTML + Tailwind CSS · fit to panel
Bring this into your project
Copy the HTML from the code panel. Keep complete utility names in files scanned by Tailwind, retain accessible labels and focus styles, and connect actions to your own application. Preview controls belong to this documentation and are not part of the copied example.