Place scalable vector icons anywhere in your content.

UIkit comes with its own SVG icon system and a comprehensive library, which comprises a growing number of elegant outline icons. This component injects SVGs into the site, so that they adopt color and can be styled with CSS.

Content Fields

Here is a list of common content fields for Uikit Icons add-on.

Setting Description
Icons An icon field with an icon selector. See live preview here https://getuikit.com/docs/icon
Size Enter a size ratio, if you want the icon to appear larger than the deful font size, for example 1.5 or 2 to double the size.
Enabel Custom Link Enter or pick a link for icon. .
Enable Icon Box Create boxed icon with custom background and color icon
Enable Hover Options Add hover effect for icon
Hover Animation Override the hover's animation setting when hovering to icon

General Settings

General settings, which are the same across all add-ons, are grouped in a General section at the bottom. Here is a short overview.

Setting Description
Margin Keep the existing vertical margin (e.g. from headings), force specific margin or remove all margin. Margins of an element can be removed from the top and bottom.
Remove top margin. Use this option to remove the add-on's top margin
Remove bottom margin. Use this option to remove the add-on's bottom margin
Animation Overwrite the animation settings from the section. This won't have any effect unless animations are enabled for the add-on.
Alignment This option specifies the alignment of an add-on according to the surrounding element
Text Breakpoint Define the device width from which the alignment will apply.
Visibility Define when the add-on should be hidden.
CSS Class If you wish to style a particular content element differently, then use this field to add a class name and also refer to it in your css file.
  • home
  • sign-in
  • sign-out
  • user
  • users
  • lock
  • unlock
  • settings
  • cog
  • nut
  • comment
  • commenting
  • comments
  • hashtag
  • tag
  • cart
  • credit-card
  • mail
  • receiver
  • search
  • location
  • bookmark
  • code
  • paint-bucket
  • camera
  • bell
  • bolt
  • star
  • heart
  • happy
  • lifesaver
  • rss
  • social
  • git-branch
  • git-fork
  • world
  • calendar
  • clock
  • history
  • future
  • pencil
  • trash
  • move
  • link
  • question
  • info
  • warning
  • image
  • thumbnails
  • table
  • list
  • menu
  • grid
  • more
  • more-vertical
  • plus
  • plus-circle
  • minus
  • minus-circle
  • close
  • check
  • ban
  • refresh
  • play
  • play-circle
  • tv
  • desktop
  • laptop
  • tablet
  • phone
  • tablet-landscape
  • phone-landscape
  • file
  • copy
  • file-edit
  • folder
  • album
  • push
  • pull
  • server
  • database
  • cloud-upload
  • cloud-download
  • download
  • upload
  • reply
  • forward
  • expand
  • shrink
  • arrow-up
  • arrow-down
  • arrow-left
  • arrow-right
  • chevron-up
  • chevron-down
  • chevron-left
  • chevron-right
  • triangle-up
  • triangle-down
  • triangle-left
  • triangle-right
  • bold
  • italic
  • strikethrough
  • video-camera
  • quote-right
  • 500px
  • behance
  • dribbble
  • facebook
  • flickr
  • foursquare
  • github
  • github-alt
  • gitter
  • google
  • google-plus
  • instagram
  • joomla
  • linkedin
  • pagekit
  • pinterest
  • soundcloud
  • tripadvisor
  • tumblr
  • twitter
  • uikit
  • vimeo
  • whatsapp
  • wordpress
  • xing
  • yelp
  • youtube