Icon

Icons can be used alongside text to help assist users in finding certain actions on a page.

color

Pick a colour...

icon

chatBubble

size

title

className

import * as React from "react";
import { Icon } from "@nulogy/components";

export default () => {
  return <Icon icon="chatBubble" title="chat" />;
}

import * as React from "react";
import { Icon } from "@nulogy/components";

export default () => {
  return <Icon icon="chatBubble" title="chat" />;
}

If your interface requires an icon not listed here, please post a message in the #design-ops slack channel.

Available Icons

Nulogy uses a selection of solid style Material Design icons.

accessTime

add

addCircleOutline

arrowForward

attachment

barcode

block

building

calendarToday

cancel

chatBubble

check

checkCircleOutline

collapse

delete

downArrow

drag

edit

error

errorFilled

expand

filter

fitScreen

getApp

help

leftArrow

lock

maximize

minimize

moveLeft

moveRight

openInNew

publish

queryBuilder

refresh

removeCircleOutline

rightArrow

save

settings

sort

sortDown

sortUp

unlock

upArrow

user

warning

wrench

zoomIn

zoomOut

Props

Name	Type	Default	Description
color	enum	currentColor	The icon's colour, if different than parent's text colour.
icon	enum		The icon to display. Accepts icons listed in Available Icons above.
size	enum	x3	The size of the icon using space tokens or px
title	string		Alternative text to be read by assistive devices. Leave blank if icon is purely decorative.
className	string		className passed to the svg element.

Related Components

IconicButton