Icons

Icons are visual symbols that help users quickly understand actions, navigate your app, and recognize features. Rhyme includes a rich set of built-in icons for every need.

Icon Syntax

In Rhyme, icons are referenced using the exclamation mark (!) followed by the icon name:

// Display an icon
.icon !home

// Use icons in buttons
.button "Settings" [settings] -icon:!gear

// Icons in lists
.list
  .item "Completed" -icon:!check -color:green
  .item "In Progress" -icon:!clock -color:blue
  .item "Cancelled" -icon:!x -color:red

Icon Categories

Rhyme provides hundreds of icons organized by purpose:

!home - Home/main screen
!back - Go back
!menu - Menu/hamburger
!search - Search/magnifying glass

Action Icons

!add / !plus - Add new item
!edit / !pencil - Edit/modify
!delete / !trash - Remove/delete
!save / !check - Save/confirm

Media Icons

!play - Play media
!pause - Pause playback
!camera - Take photo
!microphone - Record audio

Communication Icons

!mail - Email
!chat - Messages
!phone - Call
!share - Share content

Using Icons Effectively

Icons enhance usability when used consistently and meaningfully. They should support, not replace, clear text labels for important actions.

Learn More

Explore the complete icon library and best practices for using icons in your Rhyme apps!

Basics

Icon tags in Rhyme provide a simple way to include icons in your app using an exclamation mark syntax. Instead of dealing with complex icon configurations or imports, you can use friendly icon tags like !home, !mdi:account, or !feather:search directly in your Rhyme code.

How Icon Tags Work

Icon tags follow a simple pattern: ! followed by an icon name, with optional icon set prefix. For example:

!home - Basic home icon using the default icon set
!mdi:account - Account icon from the Material Design Icons set
!feather:search - Search icon from the Feather icon set
!home4 - Home icon with size 4

The Rhyme lexer automatically recognizes these icon tags during parsing and converts them into the appropriate icon references.

Icon Styling

Customize how icons appear in your app with various styling options.

Icon Sizes

Control icon size to match your design:

// Size modifiers
.icon !star -size:tiny
.icon !star -size:small
.icon !star -size:medium
.icon !star -size:large
.icon !star -size:huge

// In context
.button "Rate" [rate] -icon:!star -size:large
.text "5 stars" -icon:!star -size:tiny

Icon Colors

Make icons match your color scheme:

// Basic colors
.icon !heart -color:red
.icon !check -color:green
.icon !info -color:blue
.icon !warning -color:orange

// In buttons
.button "Like" {set $liked = true} -icon:!heart -color:pink
.button "Delete" [confirm] -icon:!trash -color:red

Icon Effects

Rotation

.icon !refresh -rotate:90
.icon !arrow-down -rotate:180
.icon !spinner -spin  // Continuous rotation

Animation

// Pulse effect
.icon !notification -pulse

// Bounce effect
.icon !bell -bounce

// Fade in
.icon !new -fade-in

Combining with Text

// Icon before text
.text "Loading..." -icon:!spinner -spin

// Icon after text
.text "External Link" -icon-after:!external-link

// Icon with spacing
.text "Settings" -icon:!gear -icon-spacing:large

Accessibility

Always provide context for icons:

!icon select tool

Enter a Rhyme icon tag with optional color (e.g., !home, !mdi:account #red4, !star #blue)

!home → mdi:home

Recently Used Icons

Useful Icons for Mobile Apps

Copied!