Icon System

A comprehensive set of 20 icons designed for the Zika Alert app. All icons are SVG-based, accessible, and support multiple sizes and colors through Tailwind tokens.

Complete Icon Set (20 Icons)

alert

Alert notification

mosquito

Mosquito/Zika indicator

map

Map/location view

settings

Settings/configuration

Close/dismiss

Menu/navigation

check

Checkmark/confirm

info

Information

warning

Warning alert

error

Error state

success

Success state

chevron-right

Navigate right

chevron-left

Navigate left

chevron-up

Navigate up

chevron-down

Navigate down

Search/find

location

Location pin

heart

Favorite/like

shield

Protection/security

user

User/profile

Size Variants

XS 12px (0.75rem)

SM 16px (1rem)

MD 20px (1.25rem)

LG 24px (1.5rem)

XL 32px (2rem)

Color Variants

Primary primary-500

Secondary secondary-500

Tertiary tertiary-500

Error error-500

Success success

Warning warning

Neutral neutral-700

Neutral Light neutral-400

Accessibility Features

With Title (Meaningful Icon)

When an icon conveys meaning, provide a title for screen readers:


                    <x-building-blocks.icon name="alert" title="Warning: High risk area" />

Without Title (Decorative)

When an icon is purely decorative (text nearby explains it), omit the title:

Settings


                    <x-building-blocks.icon name="settings" />

Usage Examples

In Buttons

In Alert Messages

Error

Unable to load risk data

Information

Risk levels updated daily

Success

Location saved successfully

In Navigation

Props Reference

Prop	Type	Default	Description
`name`	string	'alert'	Icon key (alert, mosquito, map, etc.)
`size`	string	'md'	xs, sm, md, lg, xl
`color`	string	'neutral-700'	Any Tailwind color token
`title`	string	null	Accessible name for screen readers
`class`	string	''	Extra utility classes

Code Examples

Basic Usage

<x-building-blocks.icon name="alert" />

With Size and Color

<x-building-blocks.icon 
    name="mosquito" 
    size="lg" 
    color="primary-500" 
/>

With Accessibility Title

<x-building-blocks.icon 
    name="warning" 
    size="xl" 
    color="error-500"
    title="High risk area detected"
/>