> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pictum.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Icons

> Choose and render icons through a Pictum integration.

Framework integrations provide an Icon component, and every integration provides an `icon()` helper. Prefer the component when rendering UI, including server-rendered UI.

## Render an icon

Choose an icon with its collection and name, separated by a colon.

<CodeGroup>
  ```tsx React theme={null}
  import { Icon } from "@pictum/react";

  <Icon name="devicon:react" aria-label="React" className="size-6" />
  ```

  ```vue Vue theme={null}
  <script setup lang="ts">
  import { Icon } from "@pictum/vue";
  </script>

  <template>
    <Icon name="devicon:vuejs" aria-label="Vue" class="size-6" />
  </template>
  ```

  ```blade Laravel theme={null}
  <x-icon name="devicon:laravel" aria-label="Laravel" class="size-6" />
  ```

  ```html Web theme={null}
  <script type="module">
    import { definePictumElements } from "@pictum/web";

    definePictumElements();
  </script>

  <pictum-icon name="devicon:html5" alt="HTML5" class="size-6"></pictum-icon>
  ```
</CodeGroup>

Names use the `collection:name` form. For example, `devicon:react` selects the `react` icon from the `devicon` collection.

## Examples

These examples use icons from different collections.

<CardGroup cols={3}>
  <Card title="React">
    <img src="https://pictum.dev/v1/icons/devicon/react.svg" alt="React icon" width="96" height="96" />
  </Card>

  <Card title="Vue">
    <img src="https://pictum.dev/v1/icons/devicon/vuejs.svg" alt="Vue icon" width="96" height="96" />
  </Card>

  <Card title="Sparkles">
    <img src="https://pictum.dev/v1/icons/lucide/sparkles.svg" alt="Sparkles icon" width="96" height="96" />
  </Card>
</CardGroup>

## Use a helper

Use `icon()` when you need the icon URL or SVG markup outside a component.

<CodeGroup>
  ```ts JavaScript theme={null}
  import { icon } from "@pictum/react";

  // Generate the URL without making a request.
  const url = icon("devicon:react").url;

  // Fetch canonical SVG markup.
  const svg = await icon("devicon:react").svg();
  ```

  ```php PHP theme={null}
  // Generate the URL without making a request.
  $url = Pictum\icon('devicon:php')->url();

  // Fetch canonical SVG markup.
  $svg = Pictum\icon('devicon:php')->svg();
  ```
</CodeGroup>

## Set the display size

Icon components forward native attributes. Set dimensions with your framework's normal attributes or CSS utilities.

The underlying SVG has no fixed width or height. Colored icons retain their source colors, while monochrome icons can inherit the surrounding text color when rendered inline.

## Browse the catalog

Collections group related icons under a prefix. Icon names are lowercase and usually kebab-case. Aliases resolve to their source icon automatically.

Use the collection endpoints in the [OpenAPI reference](/api-reference/overview) when you need to browse the catalog programmatically.

## Direct HTTP access

<Info>
  If no integration is available, use the [OpenAPI reference](/api-reference/overview) for direct image URLs, catalog responses, caching, and errors.
</Info>