Basic Usage

Once you have installed Iconweuse via CDN or NPM, using icons is straightforward. Here are the most common patterns.

Standard HTML

Simply use the `i` or `span` tag with our icon classes. Always include the family prefix (e.g., `iwu-breeze` or `iwu-brand`).

<i class="iwu-breeze iwu-regular iwu-home"></i>
<i class="iwu-brand iwu-github"></i>

CSS Pseudo-elements

You can also use icons in your CSS using the `::before` or `::after` pseudo-elements. You'll need to set the `font-family` and use the correct `content` unicode.

.button::before {
  font-family: "iwu-breeze";
  content: "\e900"; /* Replace with icon unicode */
  margin-right: 8px;
}

Accessibility (A11y)

To ensure your icons are accessible to screen readers, follow these best practices:

1. Decorative Icons

If an icon is purely decorative, hide it from screen readers using `aria-hidden="true"`.

2. Semantic Icons

If an icon serves as a button or conveys information, provide a clear label.