UI.Icon

UI.Icon is an implementation of icons using an SVG-spritesheet.

To use these icons, first, you must insert the spritesheet once (and only once) in the layout. The sprite sheet injection uses a custom Html component that later populates using a parcel's import. See Icon.svgSpriteImport to know what to do on the Elm's side. Parcel's instructions are in README.

NOTE: The spritesheet is automatically injected when using UI.Document.toBrowserDocument

An icon can be created and rendered as in the following pipeline:

Icon.logout "Logout from this account"
    |> Icon.renderElement renderConfig

Embed

svgSpriteImport : Html msg

Imports the SVG-spritesheet with all icons into the rendered HTML.

There is no need for using this function when you're using UI.Document, and you should be using it. But, in case you aren't, you need to insert this function on the most top component, which probably is the Element.layout, like this:

main : Program Flags Model Msg main = { yourProgram | view = { title = yourPageTitle , body = [ Icon.svgSpriteImport , Element.layout someAttributes yourPageView ] } }

NOTE: Use UI.Document!

Building

type Icon

The Icon type is used for describing the component for later rendering.

Current names

addCircle : String -> Icon

Icon constructor.

Icon.addCircle "Accessibility hint"

add : String -> Icon

Icon constructor.

Icon.add "Accessibility hint"

arrowCurveLeft : String -> Icon

Icon constructor.

Icon.arrowCurveLeft "Accessibility hint"

arrowDown : String -> Icon

Icon constructor.

Icon.arrowDown "Accessibility hint"

arrowLeft : String -> Icon

Icon constructor.

Icon.arrowLeft "Accessibility hint"

arrowRight : String -> Icon

Icon constructor.

Icon.arrowRight "Accessibility hint"

arrowUp : String -> Icon

Icon constructor.

Icon.arrowUp "Accessibility hint"

bell : String -> Icon

Icon constructor.

Icon.bell "Accessibility hint"

bicycle : String -> Icon

Icon constructor.

Icon.bicycle "Accessibility hint"

bike : String -> Icon

Icon constructor.

Icon.bike "Accessibility hint"

bluetooth : String -> Icon

Icon constructor.

Icon.bluetooth "Accessibility hint"

boltDisabled : String -> Icon

Icon constructor.

Icon.boltDisabled "Accessibility hint"

bolt : String -> Icon

Icon constructor.

Icon.bolt "Accessibility hint"

boxFilled : String -> Icon

Icon constructor.

Icon.boxFilled "Accessibility hint"

boxOutlined : String -> Icon

Icon constructor.

Icon.boxOutlined "Accessibility hint"

boxesFilled : String -> Icon

Icon constructor.

Icon.boxesFilled "Accessibility hint"

boxesOutlined : String -> Icon

Icon constructor.

Icon.boxesOutlined "Accessibility hint"

camera : String -> Icon

Icon constructor.

Icon.camera "Accessibility hint"

car : String -> Icon

Icon constructor.

Icon.car "Accessibility hint"

cellular : String -> Icon

Icon constructor.

Icon.cellular "Accessibility hint"

checkmarkCircle : String -> Icon

Icon constructor.

Icon.checkmarkCircle "Accessibility hint"

checkmarkRoundedRectangle : String -> Icon

Icon constructor.

Icon.checkmarkRoundedRectangle "Accessibility hint"

checkmark : String -> Icon

Icon constructor.

Icon.checkmark "Accessibility hint"

chevronDown : String -> Icon

Icon constructor.

Icon.chevronDown "Accessibility hint"

chevronLeft : String -> Icon

Icon constructor.

Icon.chevronLeft "Accessibility hint"

chevronRight : String -> Icon

Icon constructor.

Icon.chevronRight "Accessibility hint"

chevronUp : String -> Icon

Icon constructor.

Icon.chevronUp "Accessibility hint"

clockIssue : String -> Icon

Icon constructor.

Icon.clockIssue "Accessibility hint"

clockLocked : String -> Icon

Icon constructor.

Icon.clockLocked "Accessibility hint"

clock : String -> Icon

Icon constructor.

Icon.clock "Accessibility hint"

closeCircle : String -> Icon

Icon constructor.

Icon.closeCircle "Accessibility hint"

closeRoundedRectangle : String -> Icon

Icon constructor.

Icon.closeRoundedRectangle "Accessibility hint"

close : String -> Icon

Icon constructor.

Icon.close "Accessibility hint"

coins : String -> Icon

Icon constructor.

Icon.coins "Accessibility hint"

collapse : String -> Icon

Icon constructor.

Icon.collapse "Accessibility hint"

crosshair : String -> Icon

Icon constructor.

Icon.crosshair "Accessibility hint"

directions : String -> Icon

Icon constructor.

Icon.directions "Accessibility hint"

download : String -> Icon

Icon constructor.

Icon.download "Accessibility hint"

eBike : String -> Icon

Icon constructor.

Icon.eBike "Accessibility hint"

eCar : String -> Icon

Icon constructor.

Icon.eCar "Accessibility hint"

eVan : String -> Icon

Icon constructor.

Icon.eVan "Accessibility hint"

edit : String -> Icon

Icon constructor.

Icon.edit "Accessibility hint"

ellipsis : String -> Icon

Icon constructor.

Icon.ellipsis "Accessibility hint"

empty : String -> Icon

Icon constructor.

Icon.empty "Accessibility hint"

expand : String -> Icon

Icon constructor.

Icon.expand "Accessibility hint"

eyeHide : String -> Icon

Icon constructor.

Icon.eyeHide "Accessibility hint"

eye : String -> Icon

Icon constructor.

Icon.eye "Accessibility hint"

filter : String -> Icon

Icon constructor.

Icon.filter "Accessibility hint"

fix : String -> Icon

Icon constructor.

Icon.fix "Accessibility hint"

folder : String -> Icon

Icon constructor.

Icon.folder "Accessibility hint"

food : String -> Icon

Icon constructor.

Icon.food "Accessibility hint"

frozen : String -> Icon

Icon constructor.

Icon.frozen "Accessibility hint"

gVan : String -> Icon

Icon constructor.

Icon.gVan "Accessibility hint"

grocery : String -> Icon

Icon constructor.

Icon.grocery "Accessibility hint"

groups : String -> Icon

Icon constructor.

Icon.groups "Accessibility hint"

hamburger : String -> Icon

Icon constructor.

Icon.hamburger "Accessibility hint"

hand : String -> Icon

Icon constructor.

Icon.hand "Accessibility hint"

home : String -> Icon

Icon constructor.

Icon.home "Accessibility hint"

hourglass : String -> Icon

Icon constructor.

Icon.hourglass "Accessibility hint"

info : String -> Icon

Icon constructor.

Icon.info "Accessibility hint"

legacyApis : String -> Icon

Icon constructor.

Icon.legacyApis "Accessibility hint"

legacyHistorical : String -> Icon

Icon constructor.

Icon.legacyHistorical "Accessibility hint"

legacyLabelPrinter : String -> Icon

Icon constructor.

Icon.legacyLabelPrinter "Accessibility hint"

legacyReport : String -> Icon

Icon constructor.

Icon.legacyReport "Accessibility hint"

legacyRetailerDashboard : String -> Icon

Icon constructor.

Icon.legacyRetailerDashboard "Accessibility hint"

legacySignOut : String -> Icon

Icon constructor.

Icon.legacySignOut "Accessibility hint"

list : String -> Icon

Icon constructor.

Icon.list "Accessibility hint"

location : String -> Icon

Icon constructor.

Icon.location "Accessibility hint"

lock : String -> Icon

Icon constructor.

Icon.lock "Accessibility hint"

logout : String -> Icon

Icon constructor.

Icon.logout "Accessibility hint"

map : String -> Icon

Icon constructor.

Icon.map "Accessibility hint"

mapPinRadius : String -> Icon

Icon constructor.

Icon.mapPinRadius "Accessibility hint"

mapPin : String -> Icon

Icon constructor.

Icon.mapPin "Accessibility hint"

messageLock : String -> Icon

Icon constructor.

Icon.messageLock "Accessibility hint"

messageOTP : String -> Icon

Icon constructor.

Icon.messageOTP "Accessibility hint"

message : String -> Icon

Icon constructor.

Icon.message "Accessibility hint"

microphoneMute : String -> Icon

Icon constructor.

Icon.microphoneMute "Accessibility hint"

microphone : String -> Icon

Icon constructor.

Icon.microphone "Accessibility hint"

minus : String -> Icon

Icon constructor.

Icon.minus "Accessibility hint"

move : String -> Icon

Icon constructor.

Icon.move "Accessibility hint"

notepad : String -> Icon

Icon constructor.

Icon.notepad "Accessibility hint"

notes : String -> Icon

Icon constructor.

Icon.notes "Accessibility hint"

notification : String -> Icon

Icon constructor.

Icon.notification "Accessibility hint"

otp : String -> Icon

Icon constructor.

Icon.otp "Accessibility hint"

personAssign : String -> Icon

Icon constructor.

Icon.personAssign "Accessibility hint"

personAssigned : String -> Icon

Icon constructor.

Icon.personAssigned "Accessibility hint"

personError : String -> Icon

Icon constructor.

Icon.personError "Accessibility hint"

personUnassign : String -> Icon

Icon constructor.

Icon.personUnassign "Accessibility hint"

person : String -> Icon

Icon constructor.

Icon.person "Accessibility hint"

personsAdd : String -> Icon

Icon constructor.

Icon.personsAdd "Accessibility hint"

persons : String -> Icon

Icon constructor.

Icon.persons "Accessibility hint"

phoneEndCall : String -> Icon

Icon constructor.

Icon.phoneEndCall "Accessibility hint"

phoneStartCall : String -> Icon

Icon constructor.

Icon.phoneStartCall "Accessibility hint"

placeholder : String -> Icon

Icon constructor.

Icon.placeholder "Accessibility hint"

printerError : String -> Icon

Icon constructor.

Icon.printerError "Accessibility hint"

printer : String -> Icon

Icon constructor.

Icon.printer "Accessibility hint"

redo : String -> Icon

Icon constructor.

Icon.redo "Accessibility hint"

reload : String -> Icon

Icon constructor.

Icon.reload "Accessibility hint"

remove : String -> Icon

Icon constructor.

Icon.remove "Accessibility hint"

reporting : String -> Icon

Icon constructor.

Icon.reporting "Accessibility hint"

return : String -> Icon

Icon constructor.

Icon.return "Accessibility hint"

scanBarcode : String -> Icon

Icon constructor.

Icon.scanBarcode "Accessibility hint"

scanGroup : String -> Icon

Icon constructor.

Icon.scanGroup "Accessibility hint"

scanPackage : String -> Icon

Icon constructor.

Icon.scanPackage "Accessibility hint"

scanSpace : String -> Icon

Icon constructor.

Icon.scanSpace "Accessibility hint"

scan : String -> Icon

Icon constructor.

Icon.scan "Accessibility hint"

search : String -> Icon

Icon constructor.

Icon.search "Accessibility hint"

settings : String -> Icon

Icon constructor.

Icon.settings "Accessibility hint"

shelves : String -> Icon

Icon constructor.

Icon.shelves "Accessibility hint"

sort : String -> Icon

Icon constructor.

Icon.sort "Accessibility hint"

spaceError : String -> Icon

Icon constructor.

Icon.spaceError "Accessibility hint"

spaceSearch : String -> Icon

Icon constructor.

Icon.spaceSearch "Accessibility hint"

space : String -> Icon

Icon constructor.

Icon.space "Accessibility hint"

speakerMute : String -> Icon

Icon constructor.

Icon.speakerMute "Accessibility hint"

speaker : String -> Icon

Icon constructor.

Icon.speaker "Accessibility hint"

store : String -> Icon

Icon constructor.

Icon.store "Accessibility hint"

tag : String -> Icon

Icon constructor.

Icon.tag "Accessibility hint"

trash : String -> Icon

Icon constructor.

Icon.trash "Accessibility hint"

truck : String -> Icon

Icon constructor.

Icon.truck "Accessibility hint"

undo : String -> Icon

Icon constructor.

Icon.undo "Accessibility hint"

van : String -> Icon

Icon constructor.

Icon.van "Accessibility hint"

walk : String -> Icon

Icon constructor.

Icon.walk "Accessibility hint"

warning : String -> Icon

Icon constructor.

Icon.warning "Accessibility hint"

waves : String -> Icon

Icon constructor.

Icon.waves "Accessibility hint"

webhook : String -> Icon

Icon constructor.

Icon.webhook "Accessibility hint"

Special

fixing : String -> Icon

A monkey wrench with a red ball.

Icon.fixing "Fix something"

loader : String -> Icon

A loading spinner.

Icon.loader "You spin me right 'round"

Old (depreacted) names

assignPerson : String -> Icon

A person with a plus sign on the bottom-right.

Icon.assingPerson "Select Manager"

boxes : String -> Icon

Piled up boxes.

Icon.boxes "Stacked boxed"

NOTE: Deprecated name.

check : String -> Icon

A check mark, commonly used inside checkboxes and radio buttons.

Icon.check "Notepad"

NOTE: Deprecated name.

configure : String -> Icon

A gear. Usually used for opening settings managers.

Icon.configure "Open display settings"

NOTE: Deprecated name.

delete : String -> Icon

A trash can with an "x" on it.

Icon.delete "Trash item"

NOTE: Deprecated name.

done : String -> Icon

A notepad with a checkmark.

Icon.done "Mark all as done."

NOTE: Deprecated name.

eventLog : String -> Icon

A chat-like baloon. In Paack's apps this symbolizes the log of actions.

Icon.eventLog "Events"

NOTE: Deprecated name.

fixIssues : String -> Icon

A thunder bolt.

Icon.fixIssues "Fix issues from selected groups"

NOTE: Deprecated name.

insert : String -> Icon

A plus sign within a circle.

Icon.insert "Insert row"

NOTE: Deprecated name.

moreActions : String -> Icon

Three-dot in series horizontally. It's usually used in the web to access less commonly used actions.

Icon.moreActions "More actions"

NOTE: Deprecated name.

nextContent : String -> Icon

An arrow pointing to the right used in chevrons and paginators.

Icon.nextContent "Next page"

NOTE: Deprecated name.

notifications : String -> Icon

A bell for indicating notifications.

Icon.notifications "See notifications"

NOTE: Deprecated name.

paackSpaces : String -> Icon

Internal jargon in Paack.

Icon.paackSpaces "Spaces"

NOTE: Deprecated name.

packages : String -> Icon

"Box-Outlined".

Icon.packages "Order's packages"

NOTE: Deprecated name.

phone : String -> Icon

A phone.

Icon.phone "Call"

NOTE: Deprecated name.

pause : String -> Icon

The hand from the stop sign.

Icon.pause "Paused orders"

NOTE: Deprecated name.

previousContent : String -> Icon

An arrow pointing to the left used in chevrons and paginators.

Icon.previousContent "Previous page"

NOTE: Deprecated name.

print : String -> Icon

An A4 ink printer. Indicates the availability to print something related to the surrounding content.

Icon.print "Printer pacakage's barcode"

NOTE: Deprecated name.

sandwichMenu : String -> Icon

Tree-bar stacked vertically. It's usually used in mobile to toggle left bar menus.

Icon.sandwichMenu "Open pages menu"

NOTE: Deprecated name.

searchSpace : String -> Icon

The space icon with a search icon in the right-bottom.

Icon.searchSpace "Search Space"

NOTE: Deprecated name.

seeMore : String -> Icon

Ellipsis (three-dots horizontally aligned). For showing hidden details.

Icon.seeMore "Read more about this article"

NOTE: Deprecated name.

sortDecreasing : String -> Icon

An arrow pointing up.

Icon.sortDecreasing "Sort from Z to A"

NOTE: Deprecated name.

sortIncreasing : String -> Icon

An arrow pointing down.

Icon.sortIncreasing "Sort from A to Z"

NOTE: Deprecated name.

success : String -> Icon

A check mark in circle, commonly used to indicate a success state.

Icon.success "Success"

NOTE: Deprecated name.

toggle : String -> Icon

A foldable paper, toggle some content between showing/hiding, or full/collapsed.

Icon.toggle "Expand technical details"

NOTE: Deprecated name.

toggleDown : String -> Icon

An arrow pointing down. May indicate the expansion of a hidden content below.

Icon.toggleDown "Expand details"

NOTE: Deprecated name.

toggleUp : String -> Icon

An arrow pointing up. May indicate the collapsing of the content below.

Icon.toggleUp "Collapse details"

NOTE: Deprecated name.

unassignPerson : String -> Icon

A person with a plus sign on the bottom-right.

Icon.assingPerson "Select Manager"

NOTE: Deprecated name.

wait : String -> Icon

An hourglass.

Icon.wait "On hold"

NOTE: Deprecated name.

Disassemble

getHint : Icon -> String

For not creating data duplication, Icon.getHint can extract the hint from an Icon.

let
    icon =
        Icon.seeMore "Read more about this"
in
Element.row []
    [ Icon.renderElement renderConfig icon
    , Icon.getHint icon
        |> Text.body1
        |> Text.renderElement renderConfig
    ]

Color

withColor : Color -> Icon -> Icon

Icons colors can variate to match text color or contrast with a background. See Palette.color and Palette.setContrasting for how to compose a valid color value.

Icon.search "Search logs"
    |> Icon.withColor (Palette.color Palette.tonePrimary Palette.brightnessMiddle)
    |> Icon.renderElement renderConfig

Size

withSize : Size -> Icon -> Icon

With Icon.withSize, you'll be able to scale the icon between the standard sizes.

Icon.withSize Size.large someIcon

NOTE: Default value is Size.medium.

withCustomSize : Int -> Icon -> Icon

With Icon.withCustomSize, you'll be able to scale the icon using an integer value.

All Icons are constraint to fit inside a 1:1 square. So the set value also coincides with this square's side length. E.g., setting Icon.withCustomSize 48 will produce a square with 48px on each side.

Icon.withCustomSize 48 someIcon

NOTE: Default value is 20.

Rendering

renderElement : RenderConfig -> Icon -> Element msg

End of the builder's life. The result of this function is a ready-to-insert Elm UI's Element.

PaackEng/paack-ui/7.10.0

UI.Icon

Embed

Building

Current names

Special

Old (depreacted) names

Disassemble

Color

Size

Rendering

Modules