Function

a!richTextIcon( icon, altText, caption, size, color, link, linkStyle, showWhen )

Display a styled icon within a rich text component. Icons can be styled by configuring a color, size, or link.

To show documents as images within rich text, see Inline Image.

See also: Styled icon design guidance, Rich text style guidance

Parameters

Name	Keyword	Types	Description
Icon	icon	Text	The key of the icon to display. See Available Icons below.
Alternative Text	altText	Text	Equivalent alternate text to display when accessibility or browser compatibility issues prevent the icon from displaying.
Caption	caption	Text	Text to display in mouseovers.
Size	size	Text	Determines the icon size. Valid values: "STANDARD" (default), "SMALL", "MEDIUM", "MEDIUM_PLUS", "LARGE", "LARGE_PLUS", and "EXTRA_LARGE".
Color	color	Text	Determines the icon color. Valid values: Any hex color or "STANDARD" (default), "ACCENT", "POSITIVE", "NEGATIVE", and "SECONDARY".
Link	link	Link	Link that determines the behavior of the icon when clicked. Create links with: a!authorizationLink() a!documentDownloadLink() a!dynamicLink() a!newsEntryLink() a!processTaskLink() a!recordLink() a!reportLink() a!startProcessLink() a!submitLink() a!userRecordLink() a!safeLink()
Link Style	linkStyle	Text	Determines how the link is underlined. Valid values: "INLINE" (default), "STANDALONE".
Visibility	showWhen	Boolean	Determines whether the component is displayed on the interface. When set to false, the component is hidden and is not evaluated. Default: true.

Usage considerations

Using the icon, link, and style parameters

• If icon is null or contains an empty array, no icon is displayed.
• If link is null, the icon is not displayed as a link.
• For nested rich text, if two conflicting styles are found (e.g. both SMALL and LARGE), the innermost style will be displayed.

Examples

Use the interactive editor below to test out your code:

Linked icons within text

Icons in a grid

Standalone links

Available Icons

The table below shows each icon.

---

Icon	Key	Icon	Key	Icon	Key
	address-book		address-book-o		address-card
	address-card-o		adjust		align-center
	align-justify		align-left		align-right
	ambulance		american-sign-language-interpreting		anchor
	angle-double-down		angle-double-left		angle-double-right
	angle-double-up		angle-down		angle-left
	angle-right		angle-up		archive
	area-chart		arrow-circle-down		arrow-circle-left
	arrow-circle-o-down		arrow-circle-o-left		arrow-circle-o-right
	arrow-circle-o-up		arrow-circle-right		arrow-circle-up
	arrow-down		arrow-left		arrow-right
	arrow-up		arrows		arrows-alt
	arrows-h		arrows-v		asl-interpreting
	assistive-listening-systems		asterisk		at
	audio-description		automobile		backward
	balance-scale		ban		bank
	bar-chart		bar-chart-o		barcode
	bars		bath		bathtub
	battery		battery-0		battery-1
	battery-2		battery-3		battery-4
	battery-empty		battery-full		battery-half
	battery-quarter		battery-three-quarters		bed
	beer		bell		bell-o
	bell-slash		bell-slash-o		bicycle
	binoculars		birthday-cake		blind
	bold		bolt		bomb
	book		bookmark		bookmark-o
	braille		briefcase		bug
	building		building-o		bullhorn
	bullseye		bus		cab
	calculator		calendar		calendar-check-o
	calendar-minus-o		calendar-o		calendar-plus-o
	calendar-times-o		camera		camera-retro
	car		caret-down		caret-left
	caret-right		caret-square-o-down		caret-square-o-left
	caret-square-o-right		caret-square-o-up		caret-up
	cart-arrow-down		cart-plus		cc
	certificate		chain		chain-broken
	check		check-circle		check-circle-o
	check-square		check-square-o		chevron-circle-down
	chevron-circle-left		chevron-circle-right		chevron-circle-up
	chevron-down		chevron-left		chevron-right
	chevron-up		child		circle
	circle-o		circle-o-notch		circle-thin
	clipboard		clock-o		clone
	close		cloud		cloud-download
	cloud-upload		cny		code
	code-fork		coffee		cog
	cogs		columns		comment
	comment-o		commenting		commenting-o
	comments		comments-o		compass
	compress		copy		copyright
	creative-commons		credit-card		crop
	crosshairs		cube		cubes
	cut		cutlery		dashboard
	database		deaf		deafness
	dedent		desktop		diamond
	dollar		dot-circle-o		download
	drivers-license		drivers-license-o		edit
	eject		ellipsis-h		ellipsis-v
	envelope		envelope-o		envelope-open
	envelope-open-o		envelope-square		eraser
	eur		euro		exchange
	exclamation		exclamation-circle		exclamation-triangle
	expand		external-link		external-link-square
	eye		eye-slash		eyedropper
	fast-backward		fast-forward		fax
	feed		female		fighter-jet
	file		file-archive-o		file-audio-o
	file-code-o		file-excel-o		file-image-o
	file-movie-o		file-o		file-pdf-o
	file-photo-o		file-picture-o		file-powerpoint-o
	file-sound-o		file-text		file-text-o
	file-video-o		file-word-o		file-zip-o
	files-o		film		filter
	fire		fire-extinguisher		flag
	flag-checkered		flag-o		flash
	flask		floppy-o		folder
	folder-o		folder-open		folder-open-o
	font		forward		frown-o
	futbol-o		gamepad		gavel
	gbp		gear		gears
	genderless		gift		glass
	globe		graduation-cap		group
	h-square		hand-grab-o		hand-lizard-o
	hand-o-down		hand-o-left		hand-o-right
	hand-o-up		hand-paper-o		hand-peace-o
	hand-pointer-o		hand-rock-o		hand-scissors-o
	hand-spock-o		hand-stop-o		handshake-o
	hard-of-hearing		hashtag		hdd-o
	header		headphones		heart
	heart-o		heartbeat		history
	home		hospital-o		hotel
	hourglass		hourglass-1		hourglass-2
	hourglass-3		hourglass-end		hourglass-half
	hourglass-o		hourglass-start		i-cursor
	id-badge		id-card		id-card-o
	ils		image		inbox
	indent		industry		info
	info-circle		inr		institution
	intersex		italic		jpy
	key		keyboard-o		krw
	language		laptop		leaf
	legal		lemon-o		level-down
	level-up		life-bouy		life-buoy
	life-ring		life-saver		lightbulb-o
	line-chart		link		list
	list-alt		list-ol		list-ul
	location-arrow		lock		long-arrow-down
	long-arrow-left		long-arrow-right		long-arrow-up
	low-vision		magic		magnet
	mail-forward		mail-reply		mail-reply-all
	male		map		map-marker
	map-o		map-pin		map-signs
	mars		mars-double		mars-stroke
	mars-stroke-h		mars-stroke-v		medkit
	meh-o		mercury		microchip
	microphone		microphone-slash		minus
	minus-circle		minus-square		minus-square-o
	mobile		mobile-phone		money
	moon-o		mortar-board		motorcycle
	mouse-pointer		music		navicon
	neuter		newspaper-o		object-group
	object-ungroup		outdent		paint-brush
	paper-plane		paper-plane-o		paperclip
	paragraph		paste		pause
	pause-circle		pause-circle-o		paw
	pencil		pencil-square		pencil-square-o
	percent		phone		phone-square
	photo		picture-o		pie-chart
	plane		play		play-circle
	play-circle-o		plug		plus
	plus-circle		plus-square		plus-square-o
	podcast		power-off		print
	puzzle-piece		qrcode		question
	question-circle		question-circle-o		quote-left
	quote-right		random		recycle
	refresh		registered		remove
	reorder		repeat		reply
	reply-all		retweet		rmb
	road		rocket		rotate-left
	rotate-right		rouble		rss
	rss-square		rub		ruble
	rupee		s15		save
	scissors		search		search-minus
	search-plus		send		send-o
	server		share		share-square
	share-square-o		shekel		sheqel
	shield		ship		shopping-bag
	shopping-basket		shopping-cart		shower
	sign-in		sign-language		sign-out
	signal		signing		sitemap
	sliders		smile-o		snowflake-o
	soccer-ball-o		sort		sort-alpha-asc
	sort-alpha-desc		sort-amount-asc		sort-amount-desc
	sort-asc		sort-desc		sort-down
	sort-numeric-asc		sort-numeric-desc		sort-up
	space-shuttle		spinner		spoon
	square		square-o		star
	star-half		star-half-empty		star-half-full
	star-half-o		star-o		step-backward
	step-forward		stethoscope		sticky-note
	sticky-note-o		stop		stop-circle
	stop-circle-o		street-view		strikethrough
	subscript		subway		suitcase
	sun-o		superscript		support
	table		tablet		tachometer
	tag		tags		tasks
	taxi		television		terminal
	text-height		text-width		th
	th-large		th-list		thermometer
	thermometer-0		thermometer-1		thermometer-2
	thermometer-3		thermometer-4		thermometer-empty
	thermometer-full		thermometer-half		thermometer-quarter
	thermometer-three-quarters		thumb-tack		thumbs-down
	thumbs-o-down		thumbs-o-up		thumbs-up
	ticket		times		times-circle
	times-circle-o		times-rectangle		times-rectangle-o
	tint		toggle-down		toggle-left
	toggle-off		toggle-on		toggle-right
	toggle-up		trademark		train
	transgender		transgender-alt		trash
	trash-o		tree		trophy
	truck		try		tty
	turkish-lira		tv		umbrella
	underline		undo		universal-access
	university		unlink		unlock
	unlock-alt		unsorted		upload
	usd		user		user-circle
	user-circle-o		user-md		user-o
	user-plus		user-secret		user-times
	users		vcard		vcard-o
	venus		venus-double		venus-mars
	video-camera		volume-control-phone		volume-down
	volume-off		volume-up		warning
	wheelchair		wheelchair-alt		wifi
	window-close		window-close-o		window-maximize
	window-minimize		window-restore		won
	wrench		yen

Related Patterns

The following patterns include usage of the Styled Icon.

• Add Validations to an Inline Editable Grid (Validation, Grids, Looping): Allows the user to change data directly in a grid, and validate a various entries.

• Add, Edit, and Remove Data in an Inline Editable Grid (Grids, Looping): Allow the user to change data directly in an inline editable grid.

• Alert Banner Patterns (Choice Components): The alert banners pattern is good for creating a visual cue of different types of alerts about information on a page.

• Cards as Buttons Pattern (Choice Components, Formatting, Conditional Display): The cards as buttons pattern is a great way to prominently display a select few choices.

• Cards as Choices (Cards, Rich Text, Dynamic Links): Use this pattern to display sets of choices that are quick and easy to navigate.

• Cards as List Items Patterns (Choice Components, Images): Use the cards as list items pattern to create visually rich lists as an alternative to grids or feeds. This pattern uses a combination of cards and billboards to show lists of like items. You can easily modify the pattern to change the card content or the number of cards per row to fit your use case.

• Comments Patterns (Comments, Looping): Use this pattern when displaying a chronological list of messages from different users, such as comments on a topic or notes on a case.

• Document List (Documents): Use the document list items pattern to display a list of documents that can be searched and filtered. This pattern uses a combination of cards and rich text to show an easy to navigate list of documents of different types.

• Drilldown Pattern (Grids): The drilldown pattern allows users to select an item from a grid to see more details in place of the grid.

• Drilldown Report Pattern (Grids, Charts, Reports): The drilldown report pattern consists of a bar chart and column chart, which each drill down into a grid.

• Duration Display (Rich Text, Events): Use the duration display pattern to show the amount of time in between events in a quick, easy-to-read way.

• Dynamic Inputs (Inputs, Dynamic Links): Use the dynamic inputs pattern to allow users to easily add or remove as many values as needed.

• Grid with Selection Pattern (Grids): This pattern is an example of good UX design for a grid that allows users to select items and easily view their selections when there are multiple pages of data. It also provides information on a common save behavior.

• Inline Survey (Radio Buttons, Checkboxes, Buttons): Use this pattern to create a clean and easy to navigate survey.

• Inline Tags for Side-by-Side Layout Pattern (Formatting): This pattern shows the best practice for combining tags with standard-sized rich text, or plain text, using a side by side layout.

• KPI Patterns (Formatting): The Key Performance Indicator (KPI) patterns provide a common style and format for displaying important performance measures.

• Leaderboard (Looping): Use the leaderboard pattern to show a selection of your data in an easy to read ranked display.

• Milestone Bar Pattern (Looping): Use the milestone bar pattern to guide users through sequential steps to complete a task and show the user their progress as they move through the steps. This pattern can be used to either break up longer forms into more manageable sections or combine smaller forms into a more streamlined process.

• Navigation Patterns (Conditional Display, Formatting): Use the navigation patterns to help orient users and enable them to easily navigate pages and content.

• Set a Numeric Rating Using Rich Text Icons (Conditional Display): Save a numeric score using a set of clickable rich text icons.

• Show a Numeric Rating as Rich Text Icons (Conditional Display): Dynamically show a star rating based on a numeric score.

• User List Pattern (Looping): The user list pattern retrieves all the users in a specified group and displays them in a single column.

• Year-Over-Year Report (Charts, Reports, Formatting): This is a feature-rich, interactive report for sales and profits by products over select periods of time.