# Icons and Logos

> Icons and Logos: anatomy, keyboard behavior, state, and theming in Askr.

Source: [https://askrjs.com/docs/integrations/icons-and-logos](https://askrjs.com/docs/integrations/icons-and-logos)

Status: stable. Packages: @askrjs/lucide, @askrjs/logos.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Example

```tsx
import { GitHubLogo } from '@askrjs/logos';
import { SearchIcon } from '@askrjs/lucide';

<>
  <SearchIcon size={18} aria-hidden="true" />
  <a href={repositoryUrl}><GitHubLogo aria-label="GitHub repository" /></a>
</>
```

## Icon contract

Every icon from @askrjs/lucide and every logo from @askrjs/logos renders through the same shared contract from @askrjs/askr/foundations: data-slot="icon", a data-icon name, a data-size token (sm/md/lg/xl) when you use one of the named sizes, and data-decorative="true" when no title is set. Size and stroke width also resolve through CSS custom properties (--ak-icon-size, --ak-icon-stroke-width), so a theme can restyle icons globally without touching component code.

## Lucide imports

Import icons by name from @askrjs/lucide, e.g. import { SearchIcon, XIcon, MenuIcon } from '@askrjs/lucide', or reach a single icon directly via @askrjs/lucide/icons/search if you want the narrowest possible import path. Each icon is a generated Askr component function with a size, strokeWidth, color, and title prop — there's no string-based icon registry to look up names against.

## Brand logos

@askrjs/logos currently covers five marks — GitHub, Facebook, Microsoft, Apple, and Google — each exported by name (GitHubLogo, FacebookLogo, and so on) or reachable individually through @askrjs/logos/logos/*. Apple and GitHub inherit currentColor so they follow surrounding text; Facebook, Google, and Microsoft keep fixed brand colors so the marks stay recognizable regardless of theme.

## Accessible labeling

Icons and logos render aria-hidden="true" and skip a &lt;title&gt; element until you pass one — that's the decorative default. Passing title="Search" (or similar) drops aria-hidden and adds a real &lt;title&gt; node inside the SVG, which is what you want on a mark that carries meaning on its own. For icon-only buttons, prefer an aria-label on the button itself over relying on the icon's title.

## Documentation navigation

[Previous](https://askrjs.com/docs/integrations/monaco-editor/index.md) | [Next](https://askrjs.com/docs/integrations/lucide-gallery/index.md)