Obra Icons Svelte Public

Obra Icons Svelte


Obra Icons for Svelte.

A simple, consistent set of icons, perfect for user interfaces. Obra Icons consists of more than 600 icons.

See package at https://www.npmjs.com/package/obra-icons-svelte .

Which icons are available?

For a full reference, see the list at Obra Icons website.


npm install obra-icons-svelte

Importing an icon

  import { IconActivity } from 'obra-icons-svelte';

Customizing an icon using props

Use the size, color and strokeWidth props to customize the icon.

<IconActivity size={24} color="red" strokeWidth={1} />

For a visual example please refer to this REPL.

Targeting with CSS

Every SVG contains an obra-icon class on the top level SVG element, that you can target with CSS.

Next to this, the inner elements are also targetable, with the following class names:

  • oi-fill: Fill layers
  • oi-vector: Vector layers
  • oi-ellipse: Ellipse layers
  • oi-box: Box layers
  • oi-triangle: Triangle layers
  • oi-incomplete-triangle: Incomplete triangle layers
  • oi-mini-square: Mini square layers
  • oi-line: Line layers
  • oi-mini-dot: Mini dots
  • oi-medium-dot: Medium dots
  • oi-dot: Regular dots

For a visual example please refer to this REPL.

Top categories

Loading Svelte Themes