Icons

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

import { Icon } from "@nulogy/components";

<Icon icon="user" />

Avaliable Icons

Nulogy uses a selection of solid style Material Design icons.

accessTime

add

addCircleOutline

arrowForward

block

building

calendarToday

cancel

chatBubble

check

checkCircleOutline

close

delete

downArrow

drag

edit

error

errorFilled

filter

getApp

help

leftArrow

lock

maximize

menu

minimize

more

print

publish

queryBuilder

refresh

removeCircleOutline

rightArrow

save

search

settings

sortDown

sortUp

unlock

upArrow

user

warning

zoomIn

zoomOut

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

Guidelines

  • Avoid using icons without labels unless the meaning is ubiquitous, like print

Props

NameTypeDefaultDescription

color

String

currentcolor

The icon's colour, if different than parent's text colour.

icon

String

Required

The icon to display. Accepts icons listed in Available Icons above.

size

String

24px

The size of the icon

title

String

null

Alternative text to be read by assistive devices. Leave blank if icon is purely decorative.

className

String

undefined

className passed to the svg element.

Resources