This Pro tutorial provides the CSS code for changing the left and right arrow svg icons with custom ones in Bricks lightbox which can be seen in elements like Image Gallery.
Before:
After:
CSS
.pswp.brx .pswp__button--arrow svg {
display: none;
}
.pswp.brx .pswp__button--arrow--prev::after,
.pswp.brx .pswp__button--arrow--next::after {
content: '';
color: #fff;
width: 24px;
height: 24px;
background-repeat: no-repeat;
}
.pswp.brx .pswp__button--arrow--prev::after {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' width='24' height='24' color='%23ffffff' fill='none'%3E%3Cpath d='M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z' stroke='currentColor' stroke-width='1.5' /%3E%3Cpath d='M8 12L16 12M8 12C8 11.2998 9.9943 9.99153 10.5 9.5M8 12C8 12.7002 9.9943 14.0085 10.5 14.5' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
}
.pswp.brx .pswp__button--arrow--next::after {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' width='24' height='24' color='%23ffffff' fill='none'%3E%3Cpath d='M16 12L8 12M16 12C16 11.2998 14.0057 9.99153 13.5 9.5M16 12C16 12.7002 14.0057 14.0085 13.5 14.5' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cpath d='M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z' stroke='currentColor' stroke-width='1.5' /%3E%3C/svg%3E");
}
body .pswp.brx .pswp__button--arrow {
width: auto;
}
body .pswp.brx .pswp__button--arrow,
body .pswp.brx .pswp__button--arrow:active,
body .pswp.brx .pswp__button--arrow:focus,
body .pswp.brx .pswp__button--arrow:hover {
padding: 30px;
}How to use your own icons
Edit the HTML code of the SVG icon (left arrow icon used in our test site).
Change reference to black color (if the icon does not have a white stroke) with white.
Ex.:
Before:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="#000000" fill="none">
<path d="M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z" stroke="currentColor" stroke-width="1.5" />
<path d="M8 12L16 12M8 12C8 11.2998 9.9943 9.99153 10.5 9.5M8 12C8 12.7002 9.9943 14.0085 10.5 14.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>After:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="#ffffff" fill="none">
<path d="M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z" stroke="currentColor" stroke-width="1.5" />
<path d="M8 12L16 12M8 12C8 11.2998 9.9943 9.99153 10.5 9.5M8 12C8 12.7002 9.9943 14.0085 10.5 14.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>Copy the HTML and paste it at https://yoksel.github.io/url-encoder/ under “Insert SVG”. Copy the generated code from “Ready for CSS” and use it in the above code.