styles

Icons

We recommend using icons consistently to maintain clarity and improve usability. Here you’ll find guidelines for effectively implementing commonly used icons across Watermark products.

Implementing Icons

These icons can be used within Ripple components such as the Action Menu, Button, and Uploader by passing a hash followed by the icon name as the value of the component's “icon” property, e.g. "#add-person". To use your own SVG within a component, refer to the specific component's documentation.

Use SVGs for implementing icons outside of Ripple components. To avoid any security concerns, we recommend hosting files within the Watermark environment instead of linking to external files. Refer to the component usage guidelines for adding icons. Utilize the color tokens specified for icon usage noted in the color token library. For interactive icons, simply use the color token wmcolor-interactive.

Add and Remove

Icons used as actions to add and remove content.

Icon	Name	Action
	add	Adds various types of content. Use within the “icon only” button type.
	add-person	Adds content relating to a person or user.
	add-outline	Adds various types of content. Use as a “navigational” button type.
	remove-tag	Removes a tag.
	delete	Permanently deletes content.
	remove	Removes content from the view. This action can be undone.
	attach	Adds a file. Pair with the term “Attach”.
	upload	Adds a file. Pair with the term “Upload”.

Control Visibility

Icons used as actions to reveal and hide content.

Icon	Name	Action
	show	Reveals content.
	hide	Hides content.
	expand-more	Indicates content is collapsed. Select this action to expand various sections of content.
	expand-less	Indicates content is expanded. Select this action to collapse various sections of content.
	collapsed	Indicates content is collapsed. Pair this icon with text to expand smaller sections of content.
	expanded	Indicates content is expanded. Pair this icon with text to collapse smaller sections of content.
	more-options	Opens a menu of links or actions.
	notifications	Opens the notification panel.
	drilldown	Opens a view to reveal more detailed information related to charts and insights.
	close	Closes a view or clears content like a filter or input.
	download	Downloads content.

Filter and Sort

Icons used to adjust content by filtering and sorting.

Icon	Name	Usage
	sort-a-to-z	Indicates that content is sorted in ascending order alphabetically from a to z. Use within table column headers.
	sort-z-to-a	Indicates that content is sorted in descending order alphabetically from z to a. Use within table column headers.
	filter	Indicates filtering functionality.
	search	Indicates search functionality.
	date	Indicates date information.
	time	Indicates time information.

Indicate Status

Icons used to indicate various statuses of content without triggering actions.

Icon	Name	Usage
	error	Indicates an error state. Use the wmcolor-negative color token.
	success	Indicates a success state. Use the wmcolor-positive color token.
	info	Indicates supplemental information.
	wrong	Indicates what not to do for usage documentation. Use the wmcolor-negative color token.
	pending	Indicates a pending state.
	api-connected	Indicates data is connected.
	api-disconnected	Indicates data is disconnected.
	locked	Indicates a locked and non-interactive state.
	ai	Indicates AI generated content.

Modify

Icons used as actions to modify and adjust content.

Icon	Name	Action
	edit	Triggers an edit mode to modify content.
	save	Saves any modifcations made in edit mode.
	restore	Restores a version of content that was removed.
	undo	Undoes modifications made one at a time.
	reset	Resets content back to a previous or default state.
	move-up	Moves content up in position.
	move-down	Moves content down in position.

Navigate

Icons used to navigate content or open other views.

Icon	Name	Action
	navigator-icon	Used in the navigator component to navigate to other products.
	menu	Expands and collapses a side bar menu.
	previous	Navigates content back within a page, like in pagination or a carousel.
	next	Navigates content forward within a page, like in pagination or a carousel.
	back	Navigates to the previous page.
	forward	Navigates to the next page.
	help-center	Navigates to a product’s help center.
	open-in-new	Indicates that a link will open in a new tab.