An inline SVG icon.

It implements the <svg> element.

By default the <svg> element’s stroke and fill is currentColor, so the icon matches the color of the surrounding text.

Such icons form part of the HTML document, so they load and render the instant the page does.


Import the styles within a Next.js custom app in pages/_app.js.
import 'device-agnostic-ui/public/components/Icon.css';



TypeString (optional)

Sets the <svg> element’s width and height attributes. Some browser versions don’t support rem units.


TypeString (required)

Gets suffixed with ' icon' to form the <svg> element’s <title> children.


Type…* (optional)

Additional props for the container; an <svg> element.


Deep import.
import Icon from 'device-agnostic-ui/public/components/Icon.js';
Deep require.
const Icon = require('device-agnostic-ui/public/components/Icon.js');
Index import. Convenient, but technically inferior to a deep import.
import { Icon } from 'device-agnostic-ui';
Index require. Convenient, but technically inferior to a deep require.
const { Icon } = require('device-agnostic-ui');
An icon using a <circle> element with a fill.
import { Icon } from 'device-agnostic-ui';

const IconCircleFilled = (props) => (
  <Icon title="Circle filled" {...props}>
    <circle cx="50%" cy="50%" r="50%" stroke="none" />

const result = <IconCircleFilled size="2em" />;
Circle filled icon
An icon using a <circle> element with a stroke.
import { Icon } from 'device-agnostic-ui';

const IconCircleOutline = (props) => (
  <Icon title="Circle outline" {...props}>
    <circle cx="50%" cy="50%" r="14" strokeWidth="4" fill="none" />

const result = <IconCircleOutline size="2em" />;
Circle outline icon