lightning-icon provides you with icons in the Salesforce Lightning Design System (SLDS). Visit icons to view the available icons. You can use a combination of the variant, size, and class attributes to customize the icon styling.
Full Answer
Can I use my own icons in Salesforce lightning-icon?
See the Using Your Own Icons section. lightning-icon provides you with icons in the Salesforce Lightning Design System (SLDS). Visit icons to view the available icons. You can use a combination of the variant, size, and class attributes to customize the icon styling.
How do I use icons in Lightning components?
Icons can be used inside the body of another component or on their own. You can specify an icon from the Lightning Design System using the icon-name attribute. Here is an example.
What are utility icons used for in Salesforce?
Utility icons are used throughout the interface and are SVGs for extensibility. Connected Warning! Error! Utility image Custom icons are available in Salesforce to represent user created objects. <aura:component> <p class="slds-box slds-text-heading_small">Action icons represent actions a user can take.
What is the Salesforce Lightning Component Library?
lightning-icon - example - Salesforce Lightning Component Library The Component Library is the Lightning components developer reference. Rapidly develop apps with our responsive, reusable building blocks.
How do you use icons on lightning cards?
lightning-card displays an SLDS icon if you pass an icon name with the icon-name attribute. The icon is rendered using lightning-icon . When applying SLDS classes or icons, check that they are available in the SLDS release tied to your org.
How do I use custom icons in Salesforce?
Use simple and flat styling resembling the Salesforce1 icon family....The icon should:Be less than 10k in size.Be 120 x 120 pixels.Be a PNG with a transparent background.Have a resolution of 72 dpi.Not include a color background.Not include outer shadows on the inner icon graphic.
How do I add icons to Salesforce?
In the Details tab, click Edit. Enter the icon URL in Gantt icon....Add a Custom Icon to the GanttClick. then select Setup.Click Object Manager.Click Service Appointment, then click Field Sets.Click Service Lightbox.Drag the Gantt Icon field to the In the Field Set section.Click Save.
What is the icon in Salesforce?
Represents a visual element that provides context and enhances usability.
How do I use SVG in Salesforce lightning component?
You can add an SVG resource to your component in two ways. Add it directly to your component's HTML template. Upload the SVG resource as a static resource and import it in your component's JavaScript file. SVG (Scalable Vector Graphics) is an XML-based image format that lets you define lines, curves, shapes, and text.
How do I change the icon of an object in Salesforce?
Select App Manager Click Edit in the App. Select Utility Item Tab. Remove the Existing Icon and choose the new icon. Click Save Button.
How do you use lightning icons in LWC?
Use lightning-icon component, it's prebuilt in LWC framework. All SLDS icons are supported out of the box in this component. Refer to detailed documentation. You can also get the icon on the button by just specifying the name of the icon.
What are utility icons?
Utility icons are simple, single-color glyphs that identify labels and actions across form factors. They can be paired with text or used alone, and can be any color. They have no background shape.
How use SVG icons in LWC?
There are two ways to include SVG in LWC (Lightning Web Component):...Use SVG using Static ResourceUpload the SVG File in Static Resource. ... Include the Static Resource in Lightning Web Component and append “#id” at the end of Static Resource URL, where id is the id that we added to svg tag in the previous step.More items...•
How do I display an image in Salesforce lightning?
To display images, use the HTML element. Include an image in your component by uploading it as a static resource or content asset.To display an icon, use the lightning:icon component, which gives you access to Salesforce Lightning Design System icons or your own custom icon.
How do I add a picture to lightning in Salesforce?
Adding Image to the Lightning page This is actually pretty simple: add a Rich Text component in Lightning App Builder. copy the image from a browser. paste into the Rich Text component.
How do I add color to my lightning icon?
To change the fill and background color of a utility icon, define a custom class using the class attribute. This example applies custom fill and background colors on the utility icon. Specify the fill and background colors on the utility icon using the --sds-c-icon-color-* custom properties.
What is lightning icon?
A lightning-icon is a visual element that provides context and enhances usability. Icons can be used inside the body of another component or on their own. You can specify an icon from the Lightning Design System using the icon-name attribute.
Do icons need a description?
Sometimes an icon is decorative and does not need a description. But icons can switch between being decorative or informational based on the screen size. If you choose not to include an alternative-text description, check smaller screens and windows to ensure that the icon is decorative on all formats.
Informational Images and Icons
Informational images and icons can provide information that’s not available in the text, such as an image that represents an approved step. Include alternative text for images and icons to help users without access to the images and icons.
Decorative Images and Icons
Decorative images are images that can be removed without affecting the logic or content of the page. Assistive text is optional for decorative images.
Component Styling
- lightning-icon provides you with icons in the Salesforce Lightning Design System (SLDS). Visit iconsto view the available icons. You can use a combination of the variant, size, and classattributes to customize the icon styling. When applying SLDS classes or icons, check that they are available in the SLDS release tied to your org. The latest SLDS r...
Using Your Own Icons
Accessibility
Usage Considerations
Source Code