# Icon Link (/components/actions/icon-link)
`IconLink` navigates to another URL or route, shown as a compact icon-only control. Use
[`Link`](/components/actions/link) when the destination needs visible text. Use
[`IconButton`](/components/actions/icon-button) for an action such as saving or deleting instead of
a navigation.
apps/docs/src/examples/icon-link/basic.tsx
```tsx
import { IconLink } from '@luke-ui/react/icon-link';
export default () => {
return ;
};
```
## Size [#size]
`medium` is the default. Use `small` for compact toolbars and dense row actions. Keep controls in a
group at the same size.
apps/docs/src/examples/icon-link/size.tsx
```tsx
import { IconLink } from '@luke-ui/react/icon-link';
import { Comparison, ComparisonItem } from '#docs';
export default () => {
return (
);
};
```
## Prominence [#prominence]
`standard` is the default. Choose `low` for quiet secondary destinations and `high` for a primary
destination. High prominence uses the theme’s primary accent treatment.
apps/docs/src/examples/icon-link/prominence.tsx
```tsx
import { IconLink } from '@luke-ui/react/icon-link';
import { Comparison, ComparisonItem } from '#docs';
export default () => {
return (
);
};
```
## Custom icons [#custom-icons]
Pass a decorative, non-interactive `ReactElement` to `icon` for a graphic outside the generated icon
set, such as a brand mark. `IconLink` sizes the graphic to match its built-in icons.
apps/docs/src/examples/icon-link/custom-icon.tsx
```tsx
import { createIcon } from '@luke-ui/react/icon';
import { IconLink } from '@luke-ui/react/icon-link';
export default () => {
return (
}
target="_blank"
/>
);
};
const GithubIcon = createIcon({
path: (
),
});
```
## Disabled [#disabled]
Set `isDisabled` when the destination is temporarily unavailable. Disabled controls cannot receive
focus or respond to presses.
apps/docs/src/examples/icon-link/disabled.tsx
```tsx
import { IconLink } from '@luke-ui/react/icon-link';
export default () => {
return ;
};
```
## Accessibility [#accessibility]
Provide `aria-label` or `aria-labelledby` for every icon link. Name the destination, not the icon.
The icon itself, whether a built-in `Icon` or a custom graphic, contributes no accessible name, so
the naming prop is required.
## API [#api]